jQuery動畫效果

學習要點：

1.顯示、隐藏

2.滑動、卷動

3.淡入、淡出

4.自定義動畫

5.列隊動畫方法

6.動畫相關方法

7.動畫全局屬性

在以前非常長一段時間裡，網頁上的各種特效還需要採用 flash 在進行。但最近幾年裡， 我們已經非常少看到這樣的情況了，絕大部分已經使用 javascript 動畫效果來取代 flash。這裡 說的代替是網頁特效部分，而不是動畫。

網頁特效比方：漸變菜單、漸進顯示、圖檔輪播等； 而動畫比方：故事情節廣告、mv  等等。

一．顯示、隐藏

jquery 中顯示方法為：.show()。隐藏方法為：.hide()。在無參數的時候。僅僅是硬性的顯 示内容和隐藏内容。

$('.show').click(function () {                                    //顯示

$('#box').show();

});

$('.hide').click(function () {                                      //隐藏

$('#box').hide();

注意：.hide()方法其實就是在行内設定 css 代碼：display:none; 而.show()方法要根據原 來元素是區塊還是内聯來決定。假設是區塊，則設定 css 代碼：display:block; 如果是内聯， 則設定 css 代碼：display:inline;。

在.show()和.hide()方法可以傳遞一個參數，這個參數以毫秒(1000 毫秒等于 1 秒鐘)來控 制速度。

而且裡面富含了勻速變大變小，以及透明度變換。

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

$('#box').show(1000);                                      //顯示用了 1 秒

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

$('#box').hide(1000);                                        //隐藏用了 1 秒

除了直接使用毫秒來控制速度外。jquery 還提供了三種預設速度參數字元串：slow、

normal 和 fast。分别對應 600 毫秒、400 毫秒和 200 毫秒。

$('#box').show('fast');                                      //200 毫秒

$('#box').hide('slow');                                       //600 毫秒

注意：不管是傳遞毫秒數還是傳遞預設字元串，如果不小心傳遞錯誤或者傳遞空字元串。 那麼它将採用預設值：400 毫秒。

$('#box').show('');                                            //預設 400 毫秒

//使用.show()和.hide()的回調函數，可以實作列隊動畫效果。

$('#box').show('slow', function () {

alert('動畫持續完畢後。執行我！

');

//列隊動畫。使用函數名調用自身

$('div').first().show('fast', function showspan() {

$(this).next().show('fast', showspan);

//列隊動畫。使用 arguments.callee 匿名函數自調用

$('div').last().hide('fast', function() {

$(this).prev().hide('fast', arguments.callee);

我們在使用.show()和.hide()的時候，如果需要一個按鈕切換操作。需要進行一些條件判

斷。而 jquery 提供給我們一個類似功能的獨立方法：.toggle()。

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

$(this).toggle('slow');

二．滑動、卷動

jquery 提供了一組改變元素高度的方法：.slideup()、.slidedown()和.slidetoggle()。顧名 思義，向上收縮(卷動)和向下展開(滑動)。

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

$('#box').slidedown();

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

$('#box').slideup();

$('#box').slidetoggle();

注意：滑動、卷動效果和顯示、隐藏效果一樣，具有相同的參數。 三．淡入、淡出

jquery 提供了一組專門用于透明度變化的方法：.fadein()和.fadeout()，分别表示淡入、

淡出，當然還有一個自動切換的方法：.fadetoggle()。

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

$('#box').fadein('slow');

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

$('#box').fadeout('slow');

$('#box').fadetoggle();

 上面三個透明度方法僅僅能是從 0 到 100，或者從 100 到 0。如果我們想設定指定值就沒 有辦法了。而 jquery 為了解決這個問題提供了.fadeto()方法。

$('#box').fadeto('slow', 0.33);                    //0.33 表示值為 33

注意：淡入、淡出效果和顯示、隐藏效果一樣，具有相同的參數。

對于.fadeto()方法。 如果本身透明度大于指定值，會淡出，否則相反。

四．自己定義動畫

jquery 提供了幾種簡單常用的固定動畫方面我們使用。但有些時候。這些簡單動畫無法 滿足我們更加複雜的需求。這個時候，jquery 提供了一個.animate()方法來建立我們的自定

義動畫，滿足更多複雜多變的要求。

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

$('#box').animate({

'width' : '300px',

'height' : '200px',

'fontsize' : '50px',

'opacity' : 0.5

注意：一個 css 變化就是一個動畫效果。上面的例子中，已經有四個 css 變化，已經

實作了多重動畫同步運動的效果。

必傳的參數僅僅有一個。就是一個鍵值對 css 變化樣式的對象。

還有兩個可選參數分别 為速度和回調函數。

'height' : '200px'

}, 1000, function () {

alert('動畫執行完畢執行我！

'); 

到目前位置，我們都是建立的固定位置不動的動畫。如果想要實作運動狀态的位移動畫，

那就必須使用自定義動畫，并且結合 css 的絕對定位功能。

'top' : '300px',                                           //先必須設定 css 絕對定位

'left' : '200px'

自定義動畫中，每次開始運動都必須是初始位置或初始狀态，而有時我們想通過目前位

置或狀态下再進行動畫。jquery 提供了自定義動畫的累加、累減功能。

'left' : '+=100px',

}); 

自定義實作列隊動畫的方式，有兩種：1.在回調函數中再執行一個動畫。2.通過連綴或

順序來實作列隊動畫。

//通過依次順序實作列隊動畫

$('#box').animate({'left' : '100px'});

$('#box').animate({'top' : '100px'});

$('#box').animate({'width' : '300px'});

注意：如果不是同一個元素，就會實作同步動畫

//通過連綴實作列隊動畫

'left' : '100px'

}).animate({

'top' : '100px'

'width' : '300px'

//通過回調函數實作列隊動畫

}, function () {

'width' : '300px' 

五．列隊動畫方法

之前我們已經可以實作列隊動畫了，如果是同一個元素，可以依次順序或連綴調用。如 果是不同元素，能夠使用回調函數。但有時列隊動畫太多，回調函數的可讀性大大減少。為 此。jquery 提供了一組專門用于列隊動畫的方法。

//連綴無法實作按順序列隊

$('#box').slideup('slow').slidedown('slow').css('background', 'orange');

注意：如果動畫方法，連綴可以實依次列隊。而.css()方法不是動畫方法。會在一開始 傳入列隊之前。

那麼，能夠採用動畫方法的回調函數來解決。

//使用回調函數。強行将.css()方法排隊到.slidedown()之後

$('#box').slideup('slow').slidedown('slow', function () {

$(this).css('background', 'orange');

但如果這樣的話。當列隊動畫繁多的時候。可讀性不但下降，而原本的動畫方法不夠清 晰。是以，我們的想法是每一個操作都是自己獨立的方法。那麼 jquery 提供了一個類似于回 調函數的方法：.queue()。

//使用.queue()方法模拟動畫方法跟随動畫方法之後

$('#box').slideup('slow').slidedown('slow').queue(function () {

現在，我們想繼續在.queue()方法後面再增加一個隐藏動畫，這時發現居然無法實作。 這是.queue()特性導緻的。

有兩種方法可以解決這個問題，jquery 的.queue()的回調函數可以 傳遞一個參數。這個參數是 next 函數，在結尾處調用這個 next()方法即可再連綴執行列隊動 畫。

//使用 next 參數來實作繼續調用列隊動畫

$('#box').slideup('slow').slidedown('slow').queue(function (next) {

next();

}).hide('slow');

 因為 next 函數是 jquery1.4 版本以後才出現的，而之前我們普遍使用的是.dequeue()方法。 意思為運作下一個元素列隊中的函數。

//使用.dequeue()方法執行下一個函數動畫

$(this).dequeue();

如果採用順序調用，那麼使用列隊動畫方法，就非常清晰了，每一段代表一個列隊，而 回調函數的嵌套就會雜亂無章。

//使用順序調用的列隊，逐個執行，非常清晰

$('#box').slideup('slow');

$('#box').slidedown('slow');

$('#box').queue(function () {

})

$('#box').hide('slow');

.queue()方法還有一個功能，就是可以得到目前動畫個列隊的長度。

當然。這個用法在 普通 web開發中用的比較少，我們這裡不做詳細探讨。

//擷取目前列隊的長度。fx 是預設列隊的參數

function count() {

return $("#box").queue('fx').length;

}

//在某個動畫處調用

$('#box').slidedown('slow', function () {alert(count());});

jquery 還提供了一個清理列隊的功能方法：.clearqueue()。

把它放入一個列隊的回調函 數或.queue()方法裡，就可以把剩下為執行的列隊給移除。

//清理動畫列隊

$('#box').slidedown('slow', function () {$(this).clearqueue()});

六．動畫相關方法

非常多時候需要停止正在運作中的動畫。jquery 為此提供了一個.stop()方法。它有兩個可 選參數：.stop(clearqueue, gotoend)；clearqueue 傳遞一個布爾值，代表是否清空未執行完的 動畫列隊，gotoend 代表是否直接将正在執行的動畫跳轉到末狀态。

//強制停止運作中的

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

$('#box').stop();

//帶參數的強制運作

'left' : '300px'

}, 1000);

'bottom' : '300px'

'height' : '300px'

$('#box').stop(true ,true);

注意：第一個參數表示是否取消列隊動畫，預設為 false。

如果參數為 true，當有列隊動 畫的時候。會取消後面的列隊動畫。第二參數表示是否到達目前動畫結尾，默覺得 false。 如果參數為 true，則停止後立即到達末尾處。

有時在執行動畫或列隊動畫時。需要在運動之前有延遲執行，jquery 為此提供了.delay()

方法。

這個方法可以在動畫之前設定延遲，也可以在列隊動畫中間加上。

//開始延遲 1 秒鐘，中間延遲 1 秒

$('#box').delay(1000).animate({

在選擇器的基礎章節中，我們提到過一個過濾器:animated，這個過濾器可以判斷出目前 運動的動畫是哪個元素。通過這個特點，我們能夠避免因為使用者高速在某個元素運作動畫時， 因為動畫積累而導緻的動畫和使用者的行為不一緻。

//遞歸執行自我，無線循環播放

$('#box').slidetoggle('slow', function () {

$(this).slidetoggle('slow', arguments.callee);

//停止正在運動的動畫。并且設定紅色背景

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

$('div:animated').stop().css('background', 'red');

六．動畫全局屬性

jquery 提供了兩種全局設定的屬性。分别為：$.fx.interval，設定每秒運作的幀數；$.fx.off， 關閉頁面上全部的動畫。

$.fx.interval 屬性可以調整動畫每秒的運作幀數，預設為 13 毫秒。數字越小越流暢，但 可能影響浏覽器性能。

//設定運作幀數為 1000 毫秒

$.fx.interval = 1000;                                                //預設為 13 

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

$('#box').toggle(3000);

$.fx.off 屬性可以關閉所有動畫效果，在非常低端的浏覽器。動畫可能會出現各種異常

問題導緻錯誤。而 jquery 設定這個屬性，就是用于關閉動畫效果的。

//設定動畫為關閉 true

$.fx.off = true;                                                        //預設為 false

補充：在.animate()方法中，還有一個參數，easing 運動方式。這個參數。大部分參數值 需要通過插件來使用。在後面的課程中。會具體解說。自帶的參數有兩個：swing(緩動)、 linear(勻速)，預設為swing。

left : '800px'

}, 'slow', 'swing');

$('#pox').animate({

}, 'slow', 'linear');