jquery動畫實現

2021-10-01 18:39:58 字數 653 閱讀 6403

1.顯示隱藏

-hide(time,fn) 隱藏 time:時間 fn:動畫執行完畢後做什麼

-show(time,fn) 顯示 time:時間 fn:動畫執行完畢後做什麼

-toggle(time,fn) 互斥邏輯顯示隱藏 time:時間 fn:動畫執行完畢後做什麼

2.滑動顯示隱藏

通過改變元素高度實現滑動隱藏

time:時間 fn:動畫執行完畢後做什麼

-slidedown(time,fn)

-slideup(time,fn)

-slidetoggle(time,fn)

3.淡入淡出

通過transform和透明度完成

-fadein(time,fn)

-fadeout(time,fn)

4.自定義動畫

動畫函式的封裝

obj:執行動畫的css樣式

-animate(obj,time,fn)

需要匯入jquery庫

div

淡出顯示

淡入隱藏

$('button:eq(0)').on('click',function())

$('button:eq(1)').on('click',function())

jQuery實現動畫效果

1.隱藏 obj.hide obj.hide duration complete 如果沒有提供引數,被匹配的元素將不帶動畫地立即隱藏。這大致地等同於 css display none 2.顯示 obj.show obj.show duration complete 用法與hide類似 3.隱藏與顯示...

jQuery實現簡單的動畫

1.淡入淡出效果 fadein 淡入隱藏的元素 selector fadein speed,callback 引數 speed 效果時長。可取的值 slow fast 毫秒數 callback 過渡完成後,所執行的方法名稱 div fadein 3000 fadeout 淡出可見的元素 fadeto...

jquery動畫順序執行 JQuery動畫佇列詳解

jquery動畫存在乙個佇列,當在jquery物件上呼叫動畫方法時,如果物件正在執行某個動畫效果,那麼會把後面的動畫效果,放在乙個佇列裡面,然後按順序執行動畫佇列裡面的每乙個動畫。box.hide 1000,function box.show 1000,function box.fadeout sl...