jquery的動畫總結

2021-07-11 12:59:10 字數 3787 閱讀 6777

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());  

2、hide()隱藏效果

語法:hide(speed,callback)  number/string,function

hide(speed,easing,callback)  number/string

$("#div1").hide(3000,function());

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

語法:toggle(speed,callback)  number/string,function

toggle(speed,callback)  number/string,string,function

$("#div1").toggle(3000,function());

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

語法:slidedown(speed,callback)  number/string,function

slidedown(speed,[easing],callback)  number/string,function

$("#div1").slidedown(3000,function());

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

語法:slideup(speed,callback)  number/string,function

slideup(speed,[easing],callback)  number/string,string,function

$("#div1").slideup(3000,function())

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

語法:slidetoggle(speed,callback)  number/string,function

slidetoggle(speed,[easing],callback)  number/string,string,function

$("#div1").slidetoggle(3000,function());

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

語法:fadein(speed,callback)    number/string,function

fadein(speed,[easing],callback)  number/string,function

$("#div1").fadein(3000,function());

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

語法:fadeout(speed,callback)     number/string,function

fadeout(speed,[easing],callcack)     number/string,string,function

$("#div1").fadeout(3000,function());

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

語法: fadetoggle(speed,callback)  number/string,function

fadetoggle(speed,[easing],callback)    number/string,function

$("#div1").fadetoggle(3000,function());

10、fadeto() 由指定的時間將透明度改變到指定的透明度

語法:fadeto(speed,callback)    number/string,function

fadeto([speed],opacity,[easing],[fn])  number/string,float,string,function

$("#div1").fadeto(3000,0.22,function());

11、animate() 自定義動畫,一般來說數字變動都可以用於動畫。

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

$("#div1").animate(,3000);

其中params要用中括號括起來,可以使用的css樣式引數。注意要採用駱駝法則,如font-size要寫成fontsize。顏色漸變不支援。

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

topletterspacing

wordspacing

lineheight

textindent

12、stop() 停止正在執行動畫

stop([clearqueue],[gotoend]);  兩個引數均為布林值,第乙個表示,是否停止動畫執行、第二個表示,如果停止,是否立即變為執行完成的狀態,如果設定為否,則停留在執行一半的狀態。

$("#div1").hide(5000)  //此動畫正在執行

$("#div1").stop();    //上一行**指定的動畫停止在一半狀態

$("#div1").stop(true,true);  //停止當前動畫,同時動畫切換到完成執行狀態。

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

delay(duration,[queuename])  設定乙個延遲值來執行動畫  integer,string

$("#div1").delay(3000).hide(3000);  //表示在3000毫秒後執行hide(3000);

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

$(function());

})15、jquery.fx.interval  //該屬性設定動畫的幀速,單位是毫秒,如果設定的時間越小,就越平滑。,屬性出現的位置同樣有影響範圍

$(function());

})

jQuery動畫效果總結

jquery動畫效果總結 開發工具與關鍵技術 visualstudio2015 jqueryjquery中的動畫效果 show 顯示 把隱藏起來的元素顯示出來。列 button first on click function at position 45 顯示引數裡的 hide 隱藏 把顯 butt...

jQuery動畫效果總結

2 jquery中的滑動效果 slidedown speed easing fn 向下滑動元素,直道元素全部顯示出來 slideup speed easing fn 向下滑動元素,直道元素全部影藏出來 slidetoggle speed easing fn 向上滑動與向下滑動之間的 上面三個方法都可...

JQuery特效與動畫總結

幾種特效 一 顯示與隱藏show hide js寫法 docment.getelementbyid p1 style.display block document.getelementbyid p1 style.display none jquery顯示與隱藏的方法 p1 css dislay bl...