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

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

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

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

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

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

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

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

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

2.?show()方法

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

$(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>

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

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

$('div').hide();

});

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

$('div').show();

});

上面的代碼等價于用css()方法設(shè)置匹配元素的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');

});

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

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

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

});

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

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

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

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

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

});

});

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

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

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

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

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

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

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

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

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

5.4toggle()方法

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

此方法的作用是讓匹配元素在隱藏和顯示之間切換，它相當(dāng)于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ù)：可選。設(shè)置在動畫的不同時間點上元素的速度，可以是swing(默認(rèn))或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;

}

當(dāng)點擊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屬性)設(shè)置為relative或absolute。此處我們設(shè)置“position:relative”，有了這個值，就能設(shè)置元素的left屬性，使元素動起來。

5.5.2累加、累減動畫

上面的代碼，設(shè)置了元素向右移動500像素(left:500px)，當(dāng)執(zhí)行了一次移動效果后，再次點擊div元素，將不會有任何效果。如果在“500px”前面加上“+=”或“-?=”，則代碼的效果會發(fā)生變化，變?yōu)槊看螘谠瓉淼幕A(chǔ)上進(jìn)行累加或累減。比如將上面的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()方法的語法結(jié)構(gòu)，可以將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對象進(jìn)行操作的，所以也可以改為鏈?zhǔn)綄懛?，代碼如下：

$('#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的動畫隊列？首先，我們先來了解一下什么是隊列。隊列是一種特殊的線性表，只允許在表的前端(表頭)進(jìn)行刪除操作，在表的后端(表末)進(jìn)行添加操作，隊列的特點是先進(jìn)先出，最先插入的元素最先被刪除。所以，動畫隊列可以說是動畫執(zhí)行的一個順序機(jī)制，當(dāng)我們對一個對象添加多次動畫效果時，添加的動作就會被放入這個動畫隊列中，等前面的動畫完成后再開始執(zhí)行。

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

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

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

(2)?當(dāng)以鏈?zhǔn)降膶懛☉?yīng)用動畫方法時，動畫是按照順序發(fā)生的。

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

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

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

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

5.7停?止?動?畫

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

//添加新動畫

}

5.8動畫方法概括

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

1.?定義控件結(jié)構(gòu)及CSS樣式

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

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

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

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

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

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

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