animate()方法对一组CSS属性执行自定义动画。
动画使从一种CSS样式配置到另一种CSS样式配置的过渡动画成为可能。
所有动画属性都应设置为单个数值（例如，宽度，高度或左值）。
除字符串“ show”，“ hide”和“ toggle”外，字符串值不能设置动画（例如，背景色）。这些值允许隐藏和显示动画元素。
动画属性也可以是相对的。如果为值提供了前导+=或-=字符序列，则通过从属性的当前值中添加或减去给定的数字来计算目标值。
除了样式属性，还可以对某些非样式属性（例如：scrollTop和scrollLeft）进行动画处理。
$(selector).animate({styles}, duration, easing, callback)$(selector).animate({styles}, {options})通过更改元素的宽度来设置元素的动画：
$("#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的参数：
$("button").click(function(){
$("div").animate({width:"500px", height:"400px"}, 4000, "linear");
});测试看看‹/›将animate()与回调函数一起使用：
$("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);
}
});测试看看‹/›使用相对值为所有段落设置动画：
$("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)| 参数 | 描述 |
|---|---|
| styles | 必需。指定产生动画效果的一个或多个 CSS 属性/值。 注意：与animate()方法一起使用时，属性名称必须为驼峰式：是paddingTop而不是padding-top，marginLeft而不是margin-left以及依此类推 |
| duration | （可选）确定动画将运行多长时间的字符串或数字。预设值为400毫秒 可能的值：
|
| easing | （可选）指定在动画的不同点中元素的速度。默认值是 "swing"。 可能的值：
|
| callback | （可选）animate 函数执行完之后，要执行的函数。 |
$(selector).animate({styles}, {options})| 参数 | 描述 |
|---|---|
| styles | 必需。指定产生动画效果的一个或多个 CSS 属性/值（同上）。 |
| options | （可选）指定动画的额外选项 可选值：
|