animate()方法對(duì)一組CSS屬性執(zhí)行自定義動(dòng)畫。
動(dòng)畫使從一種CSS樣式配置到另一種CSS樣式配置的過渡動(dòng)畫成為可能。
所有動(dòng)畫屬性都應(yīng)設(shè)置為單個(gè)數(shù)值（例如，寬度，高度或左值）。
除字符串“ show”，“ hide”和“ toggle”外，字符串值不能設(shè)置動(dòng)畫（例如，背景色）。這些值允許隱藏和顯示動(dòng)畫元素。
動(dòng)畫屬性也可以是相對(duì)的。如果為值提供了前導(dǎo)+=或-=字符序列，則通過從屬性的當(dāng)前值中添加或減去給定的數(shù)字來計(jì)算目標(biāo)值。
除了樣式屬性，還可以對(duì)某些非樣式屬性（例如：scrollTop和scrollLeft）進(jìn)行動(dòng)畫處理。
$(selector).animate({styles}, duration, easing, callback)$(selector).animate({styles}, {options})通過更改元素的寬度來設(shè)置元素的動(dòng)畫：
$("#btn1").click(function(){
$("div").animate({width: "500px"});
});測(cè)試看看?/?通過更改元素的寬度和高度，使其具有動(dòng)畫效果：
$("#btn1").click(function(){
$("div").animate({width: "500px"});
$("div").animate({height: "400px"});
});測(cè)試看看?/?通過傳遞多個(gè)樣式屬性和值來對(duì)元素進(jìn)行動(dòng)畫處理：
$("#btn1").click(function(){
$("div").animate({
width:"500px",
height:"400px"
});
});測(cè)試看看?/?使用帶有animate()的duration和easing的參數(shù)：
$("button").click(function(){
$("div").animate({width:"500px", height:"400px"}, 4000, "linear");
});測(cè)試看看?/?將animate()與回調(diào)函數(shù)一起使用：
$("button").click(function(){
$("div").animate({
width:"500px",
height:"400px"
}, 500, "linear",
function(){
$(this).after("<h2>動(dòng)畫完成</h2>");
});
});測(cè)試看看?/?使用備用語法指定多個(gè)動(dòng)畫{ styles}和{ options }：
$("button").click(function(){
$("div").animate({
width:"500px",
height:"400px"
}, {
duration:500,
easing:"linear",
complete:function(){
$(this).after("<h2>動(dòng)畫完成</h2>");
}
});
});測(cè)試看看?/?用戶滾動(dòng)頁面時(shí)添加平滑滾動(dòng)：
let size = $(".main").height(); // 獲取".main" 高度
$(window).keydown(function(event) {
if(event.which === 40) { // 如果按下向下箭頭鍵
$("html, body").animate({scrollTop: "+=" + size}, 300);
} else if(event.which === 38) { // 如果按下向上箭頭鍵
$("html, body").animate({scrollTop: "-=" + size}, 300);
}
});測(cè)試看看?/?使用相對(duì)值為所有段落設(shè)置動(dòng)畫：
$("p").click(function(){
$(this).animate({
fontSize: "+=5px",
padding : "+=10px"
});
});測(cè)試看看?/?此外，我們甚至可以指定屬性的動(dòng)畫值"show"，"hide"或"toggle"：
$("button").click(function(){
$("div").animate({height: "toggle"});
});測(cè)試看看?/?$(selector).animate({styles}, duration, easing, callback)| 參數(shù) | 描述 |
|---|---|
| styles | 必需。指定產(chǎn)生動(dòng)畫效果的一個(gè)或多個(gè) CSS 屬性/值。 注意：與animate()方法一起使用時(shí)，屬性名稱必須為駝峰式：是paddingTop而不是padding-top，marginLeft而不是margin-left以及依此類推 |
| duration | （可選）確定動(dòng)畫將運(yùn)行多長(zhǎng)時(shí)間的字符串或數(shù)字。預(yù)設(shè)值為400毫秒 可能的值：
|
| easing | （可選）指定在動(dòng)畫的不同點(diǎn)中元素的速度。默認(rèn)值是 "swing"。 可能的值：
|
| callback | （可選）animate 函數(shù)執(zhí)行完之后，要執(zhí)行的函數(shù)。 |
$(selector).animate({styles}, {options})| 參數(shù) | 描述 |
|---|---|
| styles | 必需。指定產(chǎn)生動(dòng)畫效果的一個(gè)或多個(gè) CSS 屬性/值（同上）。 |
| options | （可選）指定動(dòng)畫的額外選項(xiàng) 可選值：
|