首頁 > php教程 > PHP开发 > jQuery之動畫效果大全

jQuery之動畫效果大全

高洛峰
發布: 2016-12-07 11:54:08
原創
1520 人瀏覽過

下面介紹了幾種動畫效果的方法,具體如下:

1、show()顯示效果

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

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

1

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

登入後複製

   

    

2、hide()隱藏效果

語法eed,easing,callback)  Number/String   

1

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

登入後複製

   

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

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

    Npeed,Function🀜, ,String,Function    

1

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

登入後複製

   

4、slideDown()向下顯示,slow()是水平與垂直方向同時展開,而slideDownslall:slidds )  Number/String,Function

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

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

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

    slideUp(speed,[easing],callback)    slideUp(spunceed,[easing],callback) 行/   

6、slideToggle垂直方向上切換,toggle是水平與垂直兩個方向上的,而slideToggle是僅僅垂直方向的。 ,[easing],callback)  Number/String,String,Function   

1

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

登入後複製

   

7、fadeIn() 以改變透明度為

7、fadeIn() 以改變透明度為🀀 㟜 ,Ft.

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

1

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

登入後複製

   

8、fadeString() 改變透明度

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

1

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

登入後複製

   

9、fadeToggle() 以改變透明度來切換隱藏狀態

9、fadeToggle() 以改變透明度來切換隱藏狀態

.

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

1

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

登入後複製

   

ade

allback)    Number /String,Function

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

1

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

登入後複製

   

數位變動都可以用於動畫。

語法:animate(params,speed,easing,callback);  樣式參數,時間,可選擇,函數    

1

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

登入後複製

  

括起來

.注意要採用駱駝法則,如font-size要寫成fontSize。顏色漸層不支援。

backgroundPosition

borderWidth

borderBottomWidth

borderLeftWidth

borderRightWidth

borderTopWidth

borderSpacingmargin

borderTopWidth

borderSpacingmargin

marBothio th

padding

paddingBottom

paddingLeft

paddingRight

paddingTop

height

width

maxHeight

maxWidth

minHeight

maxWidth
font
fontSize
bottom
left
right
top
letterSpacing
wordSpacing
lineHeight
textIndent

12、stop()End正在執行動畫
textIndent

12、stop()Endwhocaryl); ,第一個表示,是否停止動畫執行、第二個表示,如果停止,是否立即變為執行完成的狀態,如果設定為否,則停留在執行一半的狀態。 

1

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

登入後複製

   



 13、delay() 延遲執行動畫  當一個動畫stop()了之後還能夠用delay()來延遲執行。從停止位置繼續執行。當然用原來的方法繼續執行也不可,不過沒有延遲效果。  

1

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

登入後複製

   



 14、jQuery.fx.off//該屬性只是是否關閉當前頁面上的動畫,關閉動畫之後,沒有動畫效果,所有設定了執行時間的動畫會瞬間完成。注意此屬性出現的位置。出現的位置不同影響的範圍也不同。  

1

2

3

4

5

$("#div1").hide(5000)  //此动画正在执行

  

  $("#div1").stop();    //上一行代码指定的动画停止在一半状态

  

  $("#div1").stop(true,true);  //停止当前动画,同时动画切换到完成执行状态。

登入後複製

   


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

1

2

3

4

5

6

7

8

9

10

11

$(function(){

  

  jQuery.fx.interval = 1000;

  

  $("#div1").click(function(){  

  

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

  

   });

  

 })

登入後複製

   


相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門推薦
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板