jQuery animate() method

jQuery Effect Methods

The animate() method performs custom animations on a set of CSS properties.

Animations make it possible to transition from one CSS style configuration to another.

All animation properties should be set to a single value (e.g., width, height, or left value).

String values cannot be animated except for the strings "show", "hide", and "toggle". These values allow for hiding and showing animation elements.

Animation properties can also be relative. If a leading+= or-= character sequence, the target value is calculated by adding or subtracting the given number from the current value of the property.

In addition to style properties, animations can also be applied to certain non-style properties (e.g., scrollTop and scrollLeft).

Syntax1:

$(selector).animate({styles},　duration,　easing,　callback)

Syntax2:

$(selector).animate({styles},　{options})

示例

Set animations for elements by changing their width:

$("#btn1).click(function(){
　　$("div").animate({width: "500px");
});

Animate elements by changing their width and height:

$("#btn1).click(function(){
　　$("div").animate({width: "500px");
　　$("div").animate({height: "400px");
});

Animate elements by passing multiple style properties and values:

$("#btn1).click(function(){
　　$("div").animate({
　　　　　width:"500px",
　　　　　height:"400px"
　　});
});

Use animate() withofduration and easingofParameters:

$("button").click(function(){
　　$("div").animate({width:"500px", height:"400px"},　4000, "linear");
});

Use animate() along with a callback function:

$("button").click(function(){
　　$("div").animate({
　　　　width:"500px",
　　　　height:"400px"
　　},　500, "linear",
　　function(){
　　　　$(this).after("<h2>动画完成</h2">
　　});
});

Use alternative syntax to specify multiple animations {styles} and {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)　{　//　else　if(event.which　===
　　　　$("html,　body").animate({scrollTop:　"+="　+　size},　300);
　　}　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"});
});

参数值（语法1）

$(selector).animate({styles},　duration,　easing,　callback)

参数值（语法2）

$(selector).animate({styles},　{options})

jQuery Effect Methods