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