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