abstrak：<!DOCTYPE html><html><head> <title>jQuery動畫效果</title> <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> <script type="text/
<!DOCTYPE html>
<html>
<head>
<title>jQuery動畫效果</title>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// 1. 點擊隱藏 $('selected').hide(speed,callback)
// 可選的speed的參數(shù)規(guī)定 隱藏 速度,可以取以下值:"slow" "fast"或 毫秒"1000"
// 可選的callback參數(shù)是 隱藏 完成后執(zhí)行的函數(shù)
// $('#hide').click(function(){
// $('p').hide("slow");
// });
// 2. 點擊顯示 $('selected').show(speed,callback)
// 可選的speed的參數(shù)規(guī)定 顯示 速度,可以取以下值:"slow" "fast"或 毫秒"1000"
// 可選的callback參數(shù)是 顯示 完成后執(zhí)行的函數(shù)
// $('#show').click(function(){
// $('p').show("fast");
// });
// 3. 向下滑動元素 $('selected').slideDown(speed,callback)
// 可選的speed的參數(shù)規(guī)定 下滑 速度,可以取以下值:"slow" "fast"或 毫秒"1000"
// 可選的callback參數(shù)是 下滑 完成后執(zhí)行的函數(shù)
// $('#flip').click(function(){
// $('#panel').slideDown(1000,function(){
// $('#flip').hide(); // 滑動完成后將id="flip"的元素隱藏
// });
// });
// 4. 向上滑動元素 $('selected').slideUp(speed,callback)
// 可選的speed的參數(shù)規(guī)定 上滑 速度,可以取以下值:"slow" "fast"或 毫秒"1000"
// 可選的callback參數(shù)是 上滑 完成后執(zhí)行的函數(shù)
// $('#flip-1').click(function(){
// $('#panel-1').slideUp('fast');
// });
// 5. 向上滑動元素 $('selected').slideToggle(speed,callback)
// 可選的speed的參數(shù)規(guī)定 上下滑 速度,可以取以下值:"slow" "fast"或 毫秒"1000"
// 可選的callback參數(shù)是完成后執(zhí)行的函數(shù)
// 此方法可以向上向下滑動功能.
// $('.flip').click(function(){
// $('.panel').slideToggle(1000);
// });
// 6. fadeIn() 用于 淡入 已隱藏的元素 $('selected').fadeIn(speed,callback)
// 可選的speed參數(shù)規(guī)定效果的時長 它可以取以下值:"slow" "fast"或 毫秒"1000"
// 可選的callback參數(shù)是 fadeIn 完成后執(zhí)行的函數(shù)
// $('#btn1').click(function(){
// $('#div1').fadeIn('fast');
// $('#div2').fadeIn('slow');
// $('#div3').fadeIn(3000);
// });
// 7. fadeOut() 用于 淡出 已隱藏的元素 $('selected').fadeOut(speed,callback)
// 可選的speed參數(shù)規(guī)定效果的時長 它可以取以下值:"slow" "fast"或 毫秒"1000"
// 可選的callback參數(shù)是 fadeOut 完成后執(zhí)行的函數(shù)
// $('#btn2').click(function(){
// $('#div4').fadeOut('fast');
// $('#div5').fadeOut('slow');
// $('#div6').fadeOut(3000);
// });
// 8. $('selected').fadeToggle(speed,callback) 用于在fadeIn() 與 fadeOut之間進行切換
// 可選的speed參數(shù)規(guī)定效果的時長 它可以取以下值:"slow" "fast"或 毫秒"1000"
// 可選的callback參數(shù)是 fadeing 完成后執(zhí)行的函數(shù)
// $('#btn3').click(function(){
// $('#div7').fadeToggle(3000);
// $('#div8').fadeToggle('slow');
// $('#div9').fadeToggle('fast');
// });
// 9. $('selected').fadeTo() 允許漸變給定的不透明度(值介于0與1之間)
// 必需的 speed 參數(shù)規(guī)定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。
// fadeTo() 方法中必需的 opacity 參數(shù)將淡入淡出效果設置為給定的不透明度（值介于 0 與 1 之間）。
// 可選的 callback 參數(shù)是該函數(shù)完成后所執(zhí)行的函數(shù)名稱。
// $('#btn4').click(function(){
// $('#div10').fadeTo('slow', 0.15);
// $('#div11').fadeTo('slow', 0.8);
// $('#div12').fadeTo('slow', 0.4);
// });
// 10. $('selected').animate({params},speed,callback);
// 必需的 params 參數(shù)定義形成動畫的 CSS 屬性。
// 可選的 speed 參數(shù)規(guī)定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。
// 可選的 callback 參數(shù)是動畫完成后所執(zhí)行的函數(shù)名稱。
// $('#btn5').click(function(){
// $('#div13').animate({left:'250px'},'slow');
// });
// 操作多個屬性
// $('#btn5').click(function(){
// $('#div13').animate({left:'250px',opacity:'0.5',height:'150px',width:'150px',borderRadius:'50%'},'slow');
// });
// 使用相對值
// $('#btn5').click(function(){
// $('#div13').animate({left:'250px',height:'+=150px',width:'+=150px'},'slow');
// });
// 使用預定義的值 ,可以把屬性的動畫值設置為"slow" "hide" "toggle"
// $('#btn5').click(function(){
// $('#div13').animate({height:'toggle'},'slow');
// });
// 使用隊列功能
$('#btn5').click(function(){
var div = $('#div13');
div.animate({height:'300px',opacity:'0.4'},'slow');
div.animate({width:'300px',opacity:'0.8'},'slow');
div.animate({height:'100px',opacity:'0.4'},'slow');
div.animate({width:'100px',opacity:'0.8'},'slow');
});
});
</script>
<style type="text/css">
#panel, #flip{padding: 5px;text-align: center;background: #FF6700;border: 1px solid #c3c3c3;}
#panel{padding: 50px;display: none;}
#panel-1, #flip-1{padding: 5px;text-align: center;background: #FF6700;border: 1px solid #c3c3c3;}
#panel-1{padding: 50px;}
</style>
</head>
<body>
<p>點擊"隱藏"我將會消失,點擊"顯示"我將會出來</p>
<button id="hide">隱藏</button>
<button id="show">顯示</button>
<hr>
<div id="flip">點我滑下面板</div>
<div id="panel">Hello World!</div>
<hr>
<div id="flip-1">點我收起面板</div>
<div id="panel-1">Hello World!</div>
<hr>
<div id="flip-1" class="flip">點我 "下滑" 或者 "上滑"</div>
<div id="panel-1" class="panel">Hello World!</div>
<hr>
<button id="btn1">點擊淡入 div 元素</button>
<div id="div1" style="width:80px;height:80px;display:none;background-color:skyblue;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:lightblue;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:gray;"></div>
<hr>
<button id="btn2">點擊淡出 div 元素</button>
<div id="div4" style="width:80px;height:80px;background-color:skyblue;"></div><br>
<div id="div5" style="width:80px;height:80px;background-color:lightblue;"></div><br>
<div id="div6" style="width:80px;height:80px;background-color:gray;"></div>
<hr>
<button id="btn3">點擊淡入\淡出 div 元素</button>
<div id="div7" style="width:80px;height:80px;background-color:skyblue;"></div><br>
<div id="div8" style="width:80px;height:80px;background-color:lightblue;"></div><br>
<div id="div9" style="width:80px;height:80px;background-color:gray;"></div>
<hr>
<button id="btn4">點擊我讓顏色變淡</button>
<div id="div10" style="width:80px;height:80px;background-color:blue;"></div><br>
<div id="div11" style="width:80px;height:80px;background-color:red;"></div><br>
<div id="div12" style="width:80px;height:80px;background-color:green;"></div>
<hr>
<button id="btn5">開始動畫</button>
<!-- 默認情況下html元素為靜態(tài),而且不可移動的 需要設置相對定位或者絕對定位 固定定位 -->
<div id="div13" style="width: 100px;height: 100px;background: #ff6700;position: absolute;"></div>
</body>
</html>
Guru membetulkan：查無此人Masa pembetulan：2019-02-12 14:27:17
Rumusan guru：完成的不錯，學到這里，你的jQuery應該都會了，可以學新知識了。加油