jQuery自訂動畫函
jQuery 動畫 - animate() 方法
#? ?jQuery animate() 方法用於建立自訂動畫。
語法：
$(selector).animate({params},speed,callback);???必要的 params 參數(shù)定義形成動畫的 CSS 屬性。
???可選的 speed 參數(shù)規(guī)定效果的長度。它可以取以下值："slow"、"fast" 或毫秒。
???可選的 callback 參數(shù)是動畫完成後執(zhí)行的函數(shù)名稱。
???下面的範(fàn)例示範(fàn)animate() 方法的簡單應(yīng)用；它把<div> 元素移到左邊，直到left 屬性等於250 像素為止：
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:'250px'});
});
});
</script>
</head>
<body>
<button>開始動畫</button>
<p>默認(rèn)情況下，所有 HTML 元素的位置都是靜態(tài)的，并且無法移動。如需對位置進(jìn)行操作，記得首先把元素的 CSS position 屬性設(shè)置為 relative、fixed 或 absolute。</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
##提示：預(yù)設(shè)地，所有HTML 元素都有一個(gè)靜態(tài)位置，且無法移動。若要對位置進(jìn)行操作，請記得先把元素的 CSS position 屬性設(shè)為 relative、fixed 或 absolute！ jQuery animate() - 操作多個(gè)屬性
#請注意，生成動畫的過程中可同時(shí)使用多個(gè)屬性：
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
});
</script>
</head>
<body>
<button>開始動畫</button>
<p>默認(rèn)情況下，所有 HTML 元素的位置都是靜態(tài)的，并且無法移動。如需對位置進(jìn)行操作，記得首先把元素的 CSS position 屬性設(shè)置為 relative、fixed 或 absolute。</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>?提示：可以用animate() 方法來操作所有CSS 屬性，不過，需要記住一件重要的事情：當(dāng)使用animate() 時(shí)，必須使用Camel 標(biāo)記法書寫所有的屬性名，例如，必須使用paddingLeft 而不是padding-left，使用marginRight 而不是margin-right，等等。同時(shí)，色彩動畫並不包含在核心 jQuery 函式庫中。如果需要產(chǎn)生顏色動畫，您需要從 jQuery.com 下載 Color Animations 外掛程式。 jQuery animate() - 使用相對值
#也可以定義相對值（該值相對於元素的當(dāng)前值）。需要在值的前面加上 += 或 -=：
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
});
</script>
</head>
<body>
<button>開始動畫</button>
<p>默認(rèn)情況下，所有 HTML 元素的位置都是靜態(tài)的，并且無法移動。如需對位置進(jìn)行操作，記得首先把元素的 CSS position 屬性設(shè)置為 relative、fixed 或 absolute。</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>######jQuery animate() - 使用預(yù)先定義的值
#您甚至可以把屬性的動畫值設(shè)為"show"、"hide" 或"toggle"：
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
});
</script>
</head>
<body>
<button>開始動畫</button>
<p>默認(rèn)情況下，所有 HTML 元素的位置都是靜態(tài)的，并且無法移動。如需對位置進(jìn)行操作，記得首先把元素的 CSS position 屬性設(shè)置為 relative、fixed 或 absolute。</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html> ##jQuery animate() - 使用佇列功能
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
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>
</head>
<body>
<button>開始動畫</button>
<p>默認(rèn)情況下，所有 HTML 元素的位置都是靜態(tài)的，并且無法移動。如需對位置進(jìn)行操作，記得首先把元素的 CSS position 屬性設(shè)置為 relative、fixed 或 absolute。</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>######### 
