jQuery內建動畫樣式 學習筆記

2021-08-17 02:36:44 字數 867 閱讀 4756

show()/hide():從左上角逐漸展開或收縮;

直接以無引數形式呼叫show()和hide(),會顯示和隱藏元素,只要傳遞乙個時間引數(或者'slow'、'fast'這些字串)進去,就變成了動畫;

div.hide(3000);//在3秒內逐漸消失。

div.show('slow');//在0.6秒內逐漸顯示

toggle():根據當前狀態決定是show()還是hide()。

slideup()/slidedown():在垂直方向逐漸展開或收縮的

slideup()把乙個可見的dom元素收起來,效果跟拉上窗簾似的,slidedown()相反,而slidetoggle()則根據元素是否可見來決定下一步動作。

如果上述動畫效果還不能滿足你的要求,那就祭出最後大招:animate(),它可以實現任意動畫效果,我們需要傳入的引數就是dom元素最終的css狀態和時間,jquery在時間段內不斷調整css直到達到我們設定的值:

div.animate(,3000);//在3秒內css過渡到設定值
animatte()還可以再傳入乙個函式,當動畫結束的時候該函式將被呼叫:

div.animate(,3000,function());
序列動畫:

jquery的動畫效果還可以序列執行,通過delay()方法還可以實現暫停。

//滑出-暫停-放大-暫停-縮小

div.slidedown(2000)

.delay(1000)

.animate(,2000)

.delay(1000)

.animate(,2000);

jQuery樣式與動畫

css document ready function 這裡需要 px speech.css fontsize num px 廠商在引入 試驗性的樣式屬性 時,會在其達到css規範要求之前加乙個字首。webkit property name value moz property name value...

jQuery的遍歷以及內建動畫

例項與解釋 body great great grandparent div great grandparent ul grandparent li direct parent spanfind 獲取匹配到的後代元素 document ready function children 獲取子元素 do...

jQuery內建動畫和多庫共存

淡入淡出 不斷改變元素的透明度來實現的 1.fadein 帶動畫的顯示 2.fadeout 帶動畫隱藏 3.fadetoggle 帶動畫切換顯示 隱藏 jquery動畫本質 在指定時間內不斷改變元素樣式值來實現的 1.animate 自定義動畫效果的動畫 2.stop 停止動畫 滑動動畫 1.sli...