Example analysis of jQuery animation effect related methods_jquery

本文實例講述了jQuery動畫效果相關方法。分享給大家參考，具體如下：

1、show()顯示效果

語法：show(speed,callback)  Number/String,Function speend為動畫執行時間，單位為毫秒。也可以為slow","normal","fast" callback可選,為當動畫完成時執行的函數。

show(speed,[easing],callback)  Number/String  easing預設是swing,可選linear;

複製程式碼 程式碼如下:

$("#div1").show(3000,function() { alert("動畫顯示完成!"); });

2、hide()隱藏效果

語法:hide(speed,callback)  Number/String,Function

hide(speed,easing,callback)  Number/String

複製程式碼 程式碼如下:

$("#div1").hide(3000,function() { alert("動畫隱藏完成") });

3、toggle()隱藏顯示自動切換，目前為顯示則隱藏，目前為隱藏則顯示

語法：toggle(speed,callback)  Number/String,Function

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

複製程式碼 程式碼如下:

$("#div1").toggle(3000,function() { alert("動畫效果切換完成") });

4、slideDown()向下顯示，slow()是水平與垂直方向同時展開，而slideDown是僅在垂直方向向下展開

語法:slideDown(speed,callback)  Number/String,Function

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

複製程式碼 程式碼如下:

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

5、slideUp()向上隱藏,  hide()是水平與垂直兩個方向的，而slideUp()只是垂直方向向上收起隱藏

語法:slideUp(speed,callback)  Number/String,Function

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

複製程式碼 程式碼如下:

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

6、slideToggle垂直方向上切換,toggle是水平與垂直兩個方向上的，而slideToggle是僅僅垂直方向的。

語法:slideToggle(speed,callback)  Number/String,Function

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

複製程式碼 程式碼如下:

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

7、fadeIn() 以改變透明度來顯示

語法：fadeIn(speed,callback)    Number/String,Function

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

複製程式碼 程式碼如下:

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

8、fadeOut() 以改變透明度來隱藏

文法：fadeOut(speed,callback)     Number/String,Function

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

複製程式碼 程式碼如下:

$("#div1").fadeOut(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

Copy code The code is as follows:

$("#div1").fadeToggle(3000,function() { alert("Fade in and fade out successfully!"); });

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

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

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

Copy code The code is as follows:

$("#div1").fadeTo(3000,0.22,function (){ alert("Transparency changed successfully!"); });

11. animate() custom animation. Generally speaking, digital changes can be used for animation.

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

Copy code The code is as follows:

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

The params should be enclosed in square brackets, and you can use css style parameters. Note that Camel's Law should be used, for example, font-size should be written as fontSize. Color gradients are not supported.

backgroundPosition
borderWidth
borderBottomWidth
borderLeftWidth
borderRightWidth
borderTopWidth
borderSpacing
margin
marginBottom
marginLeft
marginRight
marginTop
outlineWidth
padding
paddingBottom
paddingLeft
paddingRight
paddingTop
height
width
maxHeight
maxWidth
minHeight
maxWidth
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 animation execution, and the second one indicates whether it will immediately change to the completion state if it stops. If Set to No to stay in a half-executed state.

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

13. delay() Delayed 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.

delay(duration,[queueName]) Set a delay value to perform animation Integer,String

Copy code The code is as follows:

$("#div1").delay(3000).hide( 3000); //Indicates that hide(3000) will be executed after 3000 milliseconds;

14. jQuery.fx.off //This property is only 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 impact areas.

$(function(){
  jQuery.fx.off = true; //属性在事件外面，对页面加载后执行的所有动画有效
  $("#div1").click(function(){ //属性如果写在这里，仅仅对当前点击事件无效，不影响其他事件的动画
   $("#div1").hide(3000); //注意由于jQuery.fx.off设置为了true,因此3000毫秒失效，相当于hide();
   });
})

15. jQuery.fx.interval //This property sets the frame rate of the animation in milliseconds. The smaller the time, the smoother it will be. , the position where the attribute appears also affects the range

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

I hope this article will be helpful to everyone in jQuery programming.