DIV CSS 佈局教程網

8.11 本章總結
編輯:jQuery基礎知識     

相對於JavaScript來說,使用jQuery定義動畫更加方便快速。不過呢,對於動畫效果,我們首選CSS3來實現,其次才是jQuery。

一、顯示和隱藏

在jQuery中,如果我們想要實現元素的顯示和隱藏,可以使用2組方法:

  • (1)show()和hide();
  • (2)toggle();

二、淡入和淡出

在jQuery中,如果我們想要實現元素的淡入淡出這種漸變效果,有3組方法:

  • (1)fadeIn()和fadeOut();
  • (2)fadeToggle();
  • (3)fadeTo();

三、滑上和滑下

在jQuery中,如果我們想要實現元素的滑動效果,也有2組方法:

  • (1)slideUp()和slideDown();
  • (2)slideToggle();

四、自定義動畫

在jQuery中,對於自定義動畫,我們可以使用animate()方法來實現。對於自定義動畫,我們分為2種形式:(1)簡單動畫;(2)累積動畫。

語法:

 
$().animate(params , speed , callback)

說明:

params,必選參數,表示“屬性:值”列表,也就是元素在動畫中變化的屬性列表(具體形式,參考下面幾個例子);

speed,可選參數,表示動畫的速度,單位為毫秒,默認值為200毫秒。如果參數省略,則采用默認速度;

callback,可選參數,表示動畫完成之後執行的函數(即回調函數)。

此外,animate()方法無法識別color、background-color和border-color這些顏色屬性。因此我們還需要引入一個jquery.color.js來修復這個bug。

五、隊列動畫

在jQuery中,隊列動畫指的是在元素中按照一定的順序執行多個動畫效果,即有多個animate()方法在元素中執行,然後根據這些animate()方法執行的先後順序,形成了動畫隊列,然後按照這個動畫隊列的順序來進行顯示。

語法:

 
$().animate().animte()…….animte()

說明:

隊列動畫,就是按照animate()方法調用的先後順序來實現的,原理很簡單。

隊列動畫包括之前我們所學到的4種動畫形式:(1)顯示和隱藏;(2)淡入和淡出;(3)滑上和滑下;(4)自定義動畫。

六、動畫的停止和延遲

1、動畫的停止

在jQuery中,很多時候我們需要停止當前元素上正在執行的動畫效果,可以使用stop()方法來實現。

語法:

 
$().stop(clearQueue,gotoEnd)

說明:

參數clearQueue和參數gotoEnd都是可選參數,取值都為布爾值。兩個參數默認值都為false。

參數clearQueue表示是否要清空“未執行”的“動畫隊列”。這裡大家要看准了,清空的是整個“動畫隊列”,而不僅僅是某一個動畫。

參數gotoEnd,表示是否直接將正在執行的動畫跳轉到末狀態。

2、動畫的延遲

在jQuery中,如果我們想要對動畫進行延遲操作,可以用delay()方法來實現。

語法:

 
$().delay(speed)

說明:

參數speed,表示動畫的速度,單位為毫秒。

七、判斷動畫狀態

在jQuery中,我們還可以使用is()方法來判斷所選元素是否正處於動畫狀態,如果元素不處於動畫狀態,則添加新的動畫;如果元素處於動畫狀態,則不添加新的動畫。

語法:

 
if(!$().is(":animated"))
{
    //如果當前沒有進行動畫,則添加新動畫
}
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved