基于新信息技術的jQuery開發(fā)基礎教程課件：jQuery中的動畫

jQuery中的動畫制作視頻推薦模塊5.1hide()方法和show()方法5.2fadeIn()方法和fadeOut()方法5.3slideUp()方法和slideDown()方法5.4toggle()方法5.5自定義動畫5.6動畫隊列5.7停止動畫5.8動畫方法概括單元總結

某視頻網(wǎng)站要在首頁新增一個視頻推薦模塊，采用列表方式展示視頻，可以點擊列表進行翻頁，效果如圖5-1所示。圖5-1視頻推薦模塊效果圖

5.1hide()方法和show()方法

1.?hide()方法此方法會將元素的display屬性(css屬性)的值改為“none”，達到隱藏元素的效果。語法如下：$(selector).hide([speed][,easing][,callback])

該函數(shù)有三個可選參數(shù)：

第一個參數(shù)：可選。元素隱藏的速度，可以是一個以毫秒為單位的number值，也可以是slow(慢速)和fast(快速)。

第二個參數(shù)：可選。設置在動畫的不同時間點上元素的速度，可以是swing(默認)或linear。

第三個參數(shù)：可選?；卣{(diào)函數(shù)，當hide()方法執(zhí)行完后要執(zhí)行的函數(shù)。

2.?show()方法

當把元素隱藏后，可以使用show()方法將元素的display樣式設置為先前的顯示狀態(tài)(其他除了none之外的值，匹配元素的默認框模型)。語法如下：

$(selector).show([speed][,easing][,callback])

該函數(shù)的參數(shù)和hide()方法一樣。

3.?hide()方法和show()方法的具體使用

1)?基本使用方法

hide()方法和show()方法可以有0～3個參數(shù)，根據(jù)參數(shù)個數(shù)不同，方法的作用也不同。以下面的兩個按鈕、一個div為例：

<buttonid="hbtn">隱藏</button>

<buttonid="sbtn">顯示</button>

<divstyle="width:200px;height:200px;background-color:red">1</div>

如果要在兩個按鈕上分別綁定對應的隱藏、顯示方法，可以直接使用不帶參數(shù)的hide()方法和show()方法，如下面的代碼，可以讓div元素在點擊對應的按鈕時瞬間被隱藏或顯示，但是這樣是沒有動畫效果的：

$('#hbtn').click(function(){

$('div').hide();

});

$('#sbtn').click(function(){

$('div').show();

});

上面的代碼等價于用css()方法設置匹配元素的display屬性，與下面的代碼效果一樣，不過寫法更簡單直接：

$('#hbtn').click(function(){

$('div').css('display','none');

});

$('#sbtn').click(function(){

$('div').css('display','block');

});

2)?添加變化過程

如果要使div元素的隱藏或顯示帶有動畫效果，可以為這兩個方法添加一個或兩個參數(shù)：

$('#hbtn').click(function(){

$('div').hide(1000);

});

$('#sbtn').click(function(){

$('div').show('linear');

});

當添加一個參數(shù)時，可以是swing(默認，開頭和結尾變化慢，中間變化快)或linear(勻速變化)，這兩個值是設置在動畫的不同時間點上元素的速度的；如果設置動畫的整體速度，那么默認值為normal。上面顯示按鈕的代碼等價于下面兩個參數(shù)的代碼：

$('#sbtn').click(function(){

$('div').show('normal','linear');

});

3)?添加回調(diào)函數(shù)

可以為hide()方法和show()方法添加回調(diào)函數(shù)，不管是1、2還是3個參數(shù)，都可以讓一個函數(shù)作為參數(shù)添加進去。如下面的代碼，當元素隱藏完畢后，會彈出對話框：

$('#hbtn').click(function(){

$('div').hide(1000,function(){

alert('元素隱藏完畢');

});

});

頁面效果如圖5-2所示。圖5-2帶回調(diào)函數(shù)的hide()方法效果圖

5.2fadeIn()方法和fadeOut()方法

這兩個方法和show()、hide()方法的作用類似，作用是讓元素通過淡入淡出的方式顯示和隱藏。fadeIn()方法對應show()方法，作用為淡入元素；fadeOut()方法對應hide()方法，作用為淡出元素。語法為：$(selector).fadeIn([speed][,callback])$(selector).fadeOut([speed][,callback])

這兩個方法與show()、hide()兩個方法的區(qū)別如下：

(1)?默認帶有動畫效果；

(2)?只改變元素的opacity值，不會改變width和height值。

參數(shù)的使用方法可以參考show()、hide()方法，此處不再贅述。

5.3slideUp()方法和slideDown()方法

slideUp()方法和slideDown()方法只會改變元素的高度。slideUp()方法對應hide()方法，讓元素高度(height)逐漸縮小直到0；slideDown()方法對應show()方法，讓元素高度(height)增加到設定的值。語法如下：$(selector).slideUp([speed][,callback])$(selector).slideDown([speed][,callback])

5.4toggle()方法

在4.2節(jié)的代碼中，使用了toggle()方法，也對此方法進行了簡單的介紹。語法如下：$(selector).toggle([speed][,easing][,callback])

此方法的作用是讓匹配元素在隱藏和顯示之間切換，它相當于hide()方法和show()方法組合的一個方法。它檢查被選元素的可見狀態(tài)，如果元素是隱藏的，則運行show()方法，顯示元素；如果元素是可見的，則運行hide()方法，隱藏元素。這會造成一種切換的效果。

toggle()方法有三個可選參數(shù)，參數(shù)的使用方法可以參考show()、hide()方法。

如下面的HTML代碼：

<button>隱藏/顯示</button>

<divstyle="width:200px;height:200px;background-color:red">1</div>

要讓點擊按鈕時，div元素在隱藏和顯示之間切換，只需要使用下面的jQuery代碼即可：

$('button').click(function(){

$('div').toggle(1000);

})

5.5自定義動畫

很多情況下，這些方法無法滿足用戶的各種需求，那么就需要對動畫有更多的控制，需要采取一些高級的自定義動畫來解決這些問題。在jQuery中，可以使用animate()方法來自定義動畫。animate()方法有兩種語法，語法1如下：$(selector).animate({styles}[,speed][,easing][,callback])

此方法有一個必需參數(shù)和三個可選參數(shù)：

?第一個參數(shù)：必需。規(guī)定產(chǎn)生動畫效果的一個或多個CSS樣式和值。

?第二個參數(shù)：可選。規(guī)定動畫的速度?？梢允且粋€以毫秒為單位的number值，也可以是slow(慢速)和fast(快速)。

?第三個參數(shù)：可選。設置在動畫的不同時間點上元素的速度，可以是swing(默認)或linear。

?第四個參數(shù)：可選。animate函數(shù)執(zhí)行完之后，要執(zhí)行的回調(diào)函數(shù)。

語法2如下：

$(selector).animate({styles}[,{options}])

此方法有一個必需參數(shù)和一個可選參數(shù)：

?第一個參數(shù)：必需。規(guī)定產(chǎn)生動畫效果的一個或多個CSS樣式和值。

?第二個參數(shù)：可選。規(guī)定動畫的額外選項。

5.5.1自定義簡單動畫

首先來看一個簡單的例子，在頁面中有一個div元素：

<divid="myDiv"></div>

這個div元素具有如下CSS屬性：

#myDiv{

position:relative;

width:300px;

height:300px;

background-color:orange;

}

當點擊div元素時，讓元素在3秒內(nèi)向右移動500像素：

$('#myDiv').click(function(){

$(this).animate({left:'500px'},3000);

})

頁面效果如圖5-3和圖5-4所示。圖5-3頁面初始化效果圖圖5-4點擊div元素后效果圖

在上面的代碼中，要使div元素向右移動，我們采用的方法是改變元素的left(CSS屬性)值。需要注意的是，為了能夠使元素的left、right、top、bottom等屬性生效，必須先把元素的position(CSS屬性)設置為relative或absolute。此處我們設置“position:relative”，有了這個值，就能設置元素的left屬性，使元素動起來。

5.5.2累加、累減動畫

上面的代碼，設置了元素向右移動500像素(left:500px)，當執(zhí)行了一次移動效果后，再次點擊div元素，將不會有任何效果。如果在“500px”前面加上“+=”或“-?=”，則代碼的效果會發(fā)生變化，變?yōu)槊看螘谠瓉淼幕A上進行累加或累減。比如將上面的jQuery代碼改成下面的累加代碼：

$('#myDiv').click(function(){

$(this).animate({left:'+=500px'},3000);

})

頁面呈現(xiàn)的效果如圖5-5～圖5-8所示。

頁面初始化效果：圖5-5頁面初始化效果圖

第一次點擊div元素：圖5-6第一次點擊div元素效果圖

第二次點擊div元素：圖5-7第二次點擊div元素效果圖

第三次點擊div元素：圖5-8第三次點擊div元素效果圖

5.5.3累加、累減動畫

1.?同時執(zhí)行多個動畫

在上面的例子中，通過控制屬性left的值實現(xiàn)了動畫的效果，這是一個單一的動畫。如果需要同時執(zhí)行多個動畫，例如在元素向右滑動的同時，放大元素。根據(jù)animate()方法的語法結構，可以將jQuery代碼改寫為下面的代碼：

$('#myDiv').click(function(){

$(this).animate({left:'500px',height:'300px',width:'300px'},3000);

})

點擊div元素后效果如圖5-9所示，div元素不僅向右移動了，還增加了寬度和高度。圖5-9點擊div元素后效果圖

2.?按順序執(zhí)行多個動畫

上面的代碼中，left、width、height屬性的變化是同時發(fā)生的，如果想要按順序依次執(zhí)行多個動畫，比如先向右移動500px(增加left)，移動完成后再放大元素(增加width和height)，可以將代碼修改如下：

$('#myDiv').click(function(){

$(this).animate({left:'500px'},3000);

$(this).animate({height:'300px',width:'300px'},3000);

})

因為animate()方法都是針對同一個jQuery對象進行操作的，所以也可以改為鏈式寫法，代碼如下：

$('#myDiv').click(function(){

$(this).animate({left:'500px'},3000)

.animate({height:'300px',width:'300px'},3000);

})

5.5.4動畫的回調(diào)函數(shù)

在上面的示例中，如果想在最后元素運動完以后，讓元素不經(jīng)過動畫效果，直接回到原來的狀態(tài)，可以在動畫最后使用回調(diào)函數(shù)，使用css()方法將元素的CSS屬性修改為原來的狀態(tài)，代碼如下：

$('#myDiv').click(function(){

$(this).animate({left:'500px'},3000)

.animate({height:'300px',width:'300px'},3000,function(){

$(this).css({left:0,width:'200px',height:'200px'});

});

})

上面的代碼定義的動畫效果是：點擊div元素，元素首先向右移動500px，然后放大到1.5倍，最后還原最初狀態(tài)。

需要注意的是，要實現(xiàn)上面要求的效果，不能把css()方法直接鏈接到最后，把css()方法直接鏈接到最后會使css()方法在動畫剛開始執(zhí)行的時候馬上被執(zhí)行。因為css()方法不會加入到動畫隊列中，而是會被立即執(zhí)行，而回調(diào)函數(shù)會加入動畫隊列，從而實現(xiàn)需要的效果。

5.6動?畫?隊?列

上面提到了一個新的概念：動畫隊列。什么是jQuery的動畫隊列？首先，我們先來了解一下什么是隊列。隊列是一種特殊的線性表，只允許在表的前端(表頭)進行刪除操作，在表的后端(表末)進行添加操作，隊列的特點是先進先出，最先插入的元素最先被刪除。所以，動畫隊列可以說是動畫執(zhí)行的一個順序機制，當我們對一個對象添加多次動畫效果時，添加的動作就會被放入這個動畫隊列中，等前面的動畫完成后再開始執(zhí)行。

動畫隊列機制的執(zhí)行順序是：

對于一組元素上的動畫效果，有如下兩種情況：

(1)?當在一個animate()方法中應用多個屬性時，動畫是同時發(fā)生的；

(2)?當以鏈式的寫法應用動畫方法時，動畫是按照順序發(fā)生的。

對于多組元素上的動畫效果，有如下情況：

(1)?默認情況下，動畫都是同時發(fā)生的；

(2)?當以回調(diào)的形式應用動畫方式時，動畫是按照回調(diào)順序發(fā)生的。

另外，在動畫方法中，要注意其他非動畫方法會插隊，例如css()方法要使非動畫方法也按照順序執(zhí)行，需要把這些方法寫在動畫方法的回調(diào)函數(shù)中。

5.7停?止?動?畫

5.7.1停止元素的動畫很多時候需要停止匹配元素正在進行的動畫，例如上例的動畫，如果需要在某處停止動畫，需要使用stop()方法。stop()方法的語法如下：$(selector).stop([stopAll][,goToEnd])

此方法有兩個可選參數(shù)：

?第一個參數(shù)：可選。布爾值，規(guī)定是否停止被選元素的所有加入隊列的動畫。默認是false。

?第二個參數(shù)：可選。布爾值，規(guī)定是否立即完成當前的動畫。默認是false。

直接使用stop()方法，則會立即停止當前正在進行的動畫，如果接下來還有動畫等待繼續(xù)進行，則以當前狀態(tài)開始接下來的動畫。經(jīng)常會遇到這種情況：在為某個元素綁定鼠標移入、移出事件之后，用戶把光標移入元素時會觸發(fā)動畫效果，而當這個動畫還沒結束時，用戶就將光標移出這個元素了，那么光標移出的動畫效果將會被放進隊列之中，等待光標移入的動畫結束后再執(zhí)行。因此如果光標移入移出得過快就會導致動畫效果與光標的動作不一致。此時只要在光標的移入、移出動畫之前加入stop()方法，就能解決這個問題。

stop()方法會結束當前正在進行的動畫，并立即執(zhí)行隊列中的下一個動畫。以下代碼就可以解決剛才的問題：

但是如果遇到組合動畫，比如下面的代碼：

此時只用一個不帶參數(shù)的stop()方法就顯得力不從心了。因為stop()方法只會停止正在進行的動畫，如果動畫正執(zhí)行在第1階段(改變width的階段)，則觸發(fā)光標移出事件后，只會停止當前的動畫，并繼續(xù)進行下面的animate({height:'300px'},1000)動畫，而光標移出事件中的動畫要等這個動畫結束后才會繼續(xù)執(zhí)行，這顯然不是預期的結果。這種情況下stop()方法的第1個參數(shù)就發(fā)揮作用了，可以把第1個參數(shù)(stopAll)設置為true，此時程序會把當前元素接下來尚未執(zhí)行完的動畫隊列都清空。把上面的代碼改成如下代碼，就能實現(xiàn)預期的效果。

第2個參數(shù)(goToEnd)可以用于讓正在執(zhí)行的動畫直接到達結束時刻的狀態(tài)，通常用于后一個動畫需要基于前一個動畫的末狀態(tài)的情況，可以通過stop(false,true)這種方式來讓當前動畫直接到達末狀態(tài)。

當然也可以兩者結合起來使用stop(true,true)，即停止當前動畫并直接到達當前動畫的末狀態(tài)，并清空動畫隊列。

但是，jQuery只能設置正在執(zhí)行的動畫的最終狀態(tài)，并沒有提供直接到達未執(zhí)行動畫隊列最終狀態(tài)的方法。例如下面的動畫代碼：

$('#myDiv').animate({width:'300px'},1000)

.animate({height:'300px'},1000)

.animate({left:'500px'},1000);

無論怎么設置stop()方法，均無法在改變width或者height時，將此div元素的末狀態(tài)變成300×300的大小，并且設置left值為500px。

5.7.2判斷元素是否處于動畫狀態(tài)

在使用animate()方法的時候，要避免動畫積累而導致動畫效果與用戶的行為不一致。當用戶快速在某個元素上執(zhí)行animate()動畫時，就會出現(xiàn)動畫積累。解決方法是判斷元素是否正處于動畫狀態(tài)，如果元素不處于動畫狀態(tài)，才為元素添加新的動畫，否則不添加。

在jQuery中，is()方法用于查看選擇的元素是否匹配選擇器。語法為：

$(selector).is(selector[,function])

此方法有兩個參數(shù)：

第一個參數(shù)：必需。選擇器表達式，根據(jù)選擇器/元素/jQuery對象檢查匹配元素集合，如果存在至少一個匹配元素，則返回true，否則返回false。

第二個參數(shù)：可選。指定了選擇元素組要執(zhí)行的函數(shù)。

使用is()方法，可以判斷元素是否處于動畫狀態(tài)。下面的代碼，在is()方法的參數(shù)中使用動畫過濾器(:animated)判斷選中的元素是否處于動畫狀態(tài)：

if($(selector).is(':animated')){

//添加新動畫

}

5.8動畫方法概括

上面介紹了常用的動畫方法，還有一些動畫方法沒有介紹到，現(xiàn)將所有動畫方法總結如下表5-1所示。

1.?定義控件結構及CSS樣式

由于頁面結構及CSS樣式不是本書重點，因此此部分的編碼思路及過程省略，大家可以參考下面的代碼：

頁面效果如圖5-10所示。圖5-10輪播圖結構規(guī)劃

2.?為控件添加翻頁功能

接下來的工作是按照需求編寫腳本，控制頁面的交互性。

頁面布局的思路是在內(nèi)容區(qū)域的div元素v_content中放置一個ul元素，設置ul元素中所有的li元素在一行顯示，對超出div元素的內(nèi)容進行隱藏，因此動畫思路也非常明顯了：只需要設置ul元素的left屬性，就能使展示內(nèi)容進行左右移動。通過計算，每一個li元素的實際寬度是(width)+(margin-left)，即180px+16px，為196px，那么每次向左或向右移動的距離為196px*4，即784px。

首先通過jQuery選擇器獲取向右的箭頭元素，然后為它綁定click事件，代碼如下：

當視頻數(shù)量有3頁(12個)時，left值有：0px、-784p