jQuery animation effects collection

The following introduces several methods of animation effects, as follows:

1. show() display effect

Syntax: show(speed,callback)　Number/String,Function　speend is the animation execution time, in milliseconds. It can also be slow", "normal", "fast" callback is optional and is a function executed when the animation is completed.

show(speed,[easing],callback) Number/String The default easing is swing, optional linear;

$("#div1").show(3000,function(){ alert("动画显示完成!"); });　　

　

2. hide() hide effect

Syntax: hide(speed,callback) Number/String, Function

hide(speed, easing, callback) Number/String

$("#div1").hide(3000,function(){ alert("动画隐藏完成") });

3. toggle() hides and displays automatically switches. When it is currently displayed, it is hidden. When it is currently hidden, it is displayed.

Syntax: toggle(speed,callback)　Number/String,Function

　　toggle(speed,callback)　Number/String ,String,Function　

$("#div1").toggle(3000,function(){ alert("动画效果切换完成") });

4. slideDown() displays downward, slow() expands horizontally and vertically at the same time, while slideDown only expands downward in the vertical direction

Syntax: slideDown(speed, callback )　Number/String,Function

　 slideDown(speed,[easing],callback)　Number/String,Function　　

$("#div1").slideDown(3000,function(){ alert("向下展开显示成功!"); });

5. slideUp() hides upward, hide() is in both horizontal and vertical directions, And slideUp() just hides it vertically upward

Syntax: slideUp(speed,callback)　Number/String,Function

　 slideUp(speed,[easing],callback)　Number/String,String,Function　　

$("#div1").slideUp(3000,function(){ alert("向上收起隐藏成功!"); })

　

6. slideToggle switches in the vertical direction. toggle is in both horizontal and vertical directions, while slideToggle is only in the vertical direction.

Syntax: slideToggle(speed,callback)　Number/String,Function

     slideToggle(speed , [easing], callback) Number/String, String, Function speed, [easing], callback) Number/String, Function ,[easing],callcack)　Number/String,String,Function

$("#div1").slideToggle(3000,function(){ alert("水平方向上切换成功"); });

9. fadeToggle() changes the transparency to switch the display and hidden state

Syntax: fadeToggle(speed,callback) Number/String,Function

fadeToggle(speed,[easing],callback) Number/String, Function

$("#div1").FadeIn(3000,function(){ alert("淡入显示成功!"); });

10. fadeTo() changes the transparency to the specified transparency by the specified time

Syntax: fadeTo(speed, callback) Number /String,Function

fadeTo([speed],opacity,[easing],[fn]) Number/String,Float,String,Function

$("#div1").fadeOut(3000,function(){ alert("淡出隐藏成功!"); });

11. animate() Custom animation, generally speaking Digital changes can be used for animation.

Syntax: animate(params, speed, easing, callback); Style parameters, time, optional, function

$("#div1").fadeToggle(3000,function(){ alert("淡入淡出切换成功!"); });

The params should be enclosed in square brackets, and you can use css style parameters. Pay attention to the camel rule, such as font-size should be written as fontSize. Color gradients are not supported. ObackgroundPosition

BorderWidth

borderbottomwidth

borderLEFTWIDTH

Borderri Right

margintop ,OutLineWidth

padding

PaddingBottom

paddingLeft

padd th

font

fontSize

bottom

left

right

top

letterSpacing

wordSpacing

lineHeight

textIndent

12. stop() stops the animation being executed

stop([clearQueue],[gotoEnd]); Both parameters are Boolean values , the first one indicates whether to stop the animation execution, and the second one indicates whether it will immediately change to the completed execution state if it is stopped. If it is set to No, it will stay in the half-executed state.

$("#div1").fadeTo(3000,0.22,function(){ alert("透明度改变成功!"); });

13. delay() to delay the execution of animation When an animation stops(), you can also use delay() to delay execution. Execution continues where it left off. Of course, it is not possible to continue execution using the original method, but there is no delay effect.

$("#div1").animate({ width:300px,height,300px },3000);

14. jQuery.fx.off//This property is just whether to turn off the animation on the current page. After turning off the animation, there will be no animation effect, and all animations with set execution time will be completed instantly. Note where this attribute appears. Different locations have different effects. ​

$("#div1").hide(5000)　　//此动画正在执行
 
　　$("#div1").stop();　　　　//上一行代码指定的动画停止在一半状态
 
　　$("#div1").stop(true,true);　　//停止当前动画，同时动画切换到完成执行状态。

​

 15、jQuery.fx.interval　　//该属性设置动画的帧速，单位是毫秒，如果设置的时间越小，就越平滑。，属性出现的位置同样有影响范围　

$(function(){
 
　　jQuery.fx.interval = 1000;
 
　　$("#div1").click(function(){　　
 
　　　　$("#div1").hide(3000);　　　//jQuery.fx.interval设置为1000，也就是1秒钟，改变一次效果。　
 
　　 });
 
 })