首頁 > web前端 > js教程 > jQuery中的動畫

jQuery中的動畫

炎欲天舞
發布: 2017-08-04 15:26:28
原創
1124 人瀏覽過

1.show()方法和hide()方法

控制元素的顯示狀態— —出現和隱藏,同時改變內容的高度、寬度和不透明度,直至這三個屬性值為100%或為0(display:none)。相當於css中的display:block/inline/none;

注意:用jQuery做動畫效果要求再標準模式下,否則可能會造成動畫抖動。標準模式即要求檔案頭包含如下的DTD定義:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://wslideww.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
登入後複製

參數:fast— —200ms、normal— —400ms、slow— —600ms、指定數字(ms);參數不是數字加引號,參數是數字可不加。

(1)fadeIn()方法和fadeOut()方法

只改變元素的不透明度— —增加透明度和降低透明度,直到元素完全消失(display:none)

(2)slideUp()方法和slideDown()方法

只改變元素的高度— —收起和展開

 

2.animate()方法—自訂動畫

left屬性:此屬性定義了定位元素外邊距邊界與其包含區塊左邊界之間的偏移。

註解:如果 "position" 屬性的值為 "static",則設定 "left" 屬性不會產生任何效果。

格式:animate(params,speed,callback)

(1)第一個參數params:一個包含樣式屬性及值得映射,範例:{property:“value1”,property: 「value1」。 。 。 。 }

(2)第二個參數speed:速度參數

(3)第三個參數callback:回呼函數,動畫完成時執行的動作

#補充: ①屬性的值可以累加、累減,animate({left:"+=500px"})

           ②設定不同的屬性可同時執行多個動畫,也可拆開程式碼依序執行

           ③animate()方法都是對同一個jQuery物件進行操作,可以用鍊式的寫法實現多重運算

 

3.動畫回呼函數

 

3.動畫回呼函數

####動畫佇列:動畫效果的執行具有先後順序######註解:只有動畫的方法才能加入到動畫佇列中,非動畫方法不會加入動畫佇列,而是立即執行,可透過將非動畫方法寫在回調函數中來對非動畫方法實作排隊。 ###### ###

以上是jQuery中的動畫的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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