jQuery允許我們創(chuàng)建自定義動畫。
jQuery animate()方法對一組CSS屬性執(zhí)行自定義動畫。
這是animate()方法的語法：
$(selector).animate({styles}, duration, easing, callback)參數(shù)：
{styles} -指定動畫將向其移動的CSS屬性和值的對象
duration -確定動畫效果將運行多長時間。可能的值：“ slow”，“ fast”或毫秒
easing -指示要用于過渡的緩動功能?？赡艿闹担骸?swing”，“ linear”
callback-指定在animate()方法完成后要調(diào)用的函數(shù)
以下示例通過更改元素的寬度為元素設(shè)置動畫：
$("button").click(function(){
$("div").animate({width: "500px"});
});測試看看?/?以下示例通過更改元素的位置來對元素進行動畫處理：
$("button").click(function(){
$("div").animate({left: "500px"});
});測試看看?/?默認情況下，所有HTML元素都具有靜態(tài)位置，并且靜態(tài)元素無法移動。
要操縱位置，請記住首先將元素的CSS 位置屬性設(shè)置為相對，固定或絕對。
我們還可以同時為一個元素的多個屬性設(shè)置動畫。
$("button").click(function(){
$("div").animate({
width:"500px",
height:"400px",
opacity: 0.3,
left: "50px"
});
});測試看看?/?以下示例使用animate()演示了duration和easing參數(shù)：
$("button").click(function(){
$("div").animate({
width:"500px",
height:"400px"
}, 4000, "linear");
});測試看看?/?以下示例使用animate()演示了回調(diào)參數(shù)：
$("button").click(function(){
$("div").animate({
width:"500px",
height:"400px"
}, 500, "linear",
function(){
$(this).after("<h2>動畫已經(jīng)完成</h2>");
});
});測試看看?/?使用animate()方法時要記住的要點：
所有動畫屬性都應(yīng)設(shè)置為單個數(shù)值（例如，寬度，高度或左值）。
字符串值不能設(shè)置為動畫（例如，背景顏色）
要設(shè)置背景顏色的動畫，請使用jQuery顏色插件
與animate()方法一起使用時，屬性名稱必須為camelCased，如：您應(yīng)該使用paddingTop而不是padding-top，使用marginLeft而不是margin-left，等等。
默認情況下，jQuery帶有動畫的隊列功能。
在隊列中，一個或多個功能等待運行。
這意味著，如果您彼此之后編寫多個animate()調(diào)用，則jQuery將使用這些方法調(diào)用創(chuàng)建一個“內(nèi)部”隊列。然后，它一個一個地運行動畫調(diào)用。
下面的示例首先更改DIV元素的寬度，然后更改高度，然后增加文本的字體大?。?/p>
$("button").click(function(){
let div = $("div");
div.animate({width:"500px"});
div.animate({height:"200px"});
div.animate({fontSize: "10em"});
});測試看看?/?我們還可以使用jQuery的鏈接功能在一個隊列中逐個動畫一個元素的多個屬性。
$("button").click(function(){
$("div")
.animate({width:"500px"})
.animate({height:"200px"})
.animate({fontSize: "10em"})
.animate({opacity: 0.3});
});測試看看?/?您將在本教程的后面部分了解有關(guān)鏈接的更多信息。
動畫屬性也可以是相對的。如果為值提供了前導(dǎo)+=或-=字符序列，則通過從屬性的當前值中添加或減去給定的數(shù)字來計算目標值。
$("p").click(function(){
$(this).animate({
fontSize: "+=5px",
padding : "+=10px"
});
});測試看看?/?此外，我們甚至可以指定屬性的動畫值"show"，"hide"或"toggle"：
$("button").click(function(){
$("div").animate({height: "toggle"});
});測試看看?/?有關(guān)完整的效果參考，請訪問我們的jQuery 效果參考手冊。