jQuery Effects animate() Method

Métodos HTML/CSS do jQuery

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

Animations make it possible to transition smoothly 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 other than "show", "hide", and "toggle" cannot be animated (e.g., background color). These values allow for hiding and showing animated 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 attribute.

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 the animation of an element by changing its 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:

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

Use animate() together with a callback function:

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

Use alternative syntax to specify multiple animations {styles} and {options}:

　　$("div").animate({
　　　　width:"500px",
　　　　height:"400px"
　　
　　　　duration:500,
　　　　easing:"linear",
　　　　complete:function(){
　　　　　　$(this).after("
动画完成
");
　　　　}
　　});
});

用户滚动页面时添加平滑滚动：

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"
　　});
});

　　$\(\"div\\
});

参数值（语法1）

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

参数值（语法2）

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

Métodos HTML/CSS do jQuery