jQuery基礎動畫效果

內容摘要：

1.顯示、隱藏

2.滑動、捲動

3.淡入、淡出

4.自定義動畫

5.列隊動畫方法

6.動畫相關方法

7.動畫全域性屬性

一．顯示、隱藏

jquery 中顯示方法為：.show()，隱藏方法為：.hide()。在無引數的時候，只是硬性的顯示內容和隱藏內容。

$('.show').click(function () , 1000, function () );

45 　　$('#box').animate();

67 　　$('#box').animate();

89 });

注意：如果不是同乙個元素，就會實現同步動畫。

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

1 $('.animate').click(function
() ).animate().animate();
1617 });

//通過**函式實現列隊動畫

1 $('.animate').click(function
() , function
() , function
() );
2021
});22
23});
2425
});26
27

五．列隊動畫方法

之前我們已經可以實現列隊動畫了，如果是同乙個元素，可以依次順序或連綴呼叫。如果是不同元素，可以使用**函式。但有時列隊動畫太多，**函式的可讀性大大降低。為此，jquery 提供了一組專門用於列隊動畫的方法。

//注意連綴無法實現按順序列隊

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

ps：如果動畫方法，連綴可以實依次列隊，而.css()方法不是動畫方法，會在一開始傳入列隊之前。那麼，可以採用動畫方法的**函式來解決。

//使用**函式，強行將.css()方法排隊到.slidedown()之後

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

但如果這樣的話，當列隊動畫繁多的時候，可讀性不但下降，而原本的動畫方法不夠清晰。所以，我們的想法是每個操作都是自己獨立的方法。那麼 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) ).hide('slow');

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

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

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

如果採用順序呼叫，那麼使用列隊動畫方法，就非常清晰了，每一段代表乙個列隊，而**函式的巢狀就會雜亂無章。

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

1 $('#box').slideup('slow');
23 $('#box').slidedown('slow');
45 $('#box').queue(function
() )
1213 $('#box').hide('slow');

.queue()方法還有乙個功能，就是可以得到當前動畫列隊的長度。當然，這個用法在普通 web 開發中用的比較少，這裡不做詳細**。

jquery 還提供了乙個清理列隊的功能方法：.clearqueue()。把它放入乙個列隊的**函式或.queue()方法裡，就可以把剩下未執行的列隊給移除。

//清理動畫列隊

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

六．動畫相關方法

很多時候需要停止正在執行中的動畫，jquery 為此提供了乙個.stop()方法。它有兩個可選引數：.stop(clearqueue, gotoend)；

clearqueue：傳遞乙個布林值，代表是否清空當前元素未執行完的動畫列隊；

gotoend ：代表是否直接將正在執行的當前動畫跳轉到當前動畫的末狀態。

如果直接使用stop()方法，則會立即停止當前正在進行的動畫（記住，只是停止當前正在執行的，見《鋒利jquery 第二版》p128詳解），如果接下來還有動畫等待執行，則以當前狀態開始接下裡的動畫。

//強制停止執行中的

$('.stop').click(function () , 1000);

89 $('#box').animate(, 1000);

1415 $('#box').animate(, 1000);

2021 $('#box').animate(, 1000);

2627

});28

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

() );

ps：第乙個引數表示是否取消列隊動畫，預設為 false。如果引數為 true，當有列隊動畫的時候，會取消後面的列隊動畫。第二引數表示是否到達當前動畫結尾，預設為 false。如果引數為 true，則停止後立即到達末尾處。

有時在執行動畫或列隊動畫時，需要在運動之前有延遲執行， jquery 為此提供了.delay()方法。這個方法可以在動畫之前設定延遲，也可以在列隊動畫中間加上。

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

$('.animate').click(function () , 1000);

$('#box').delay(1000).animate(, 1000);

$('#box').animate(, 1000);

有乙個過濾器:animated，這個過濾器可以判斷出當前運動的動畫是哪個元素。通過這個特點，我們可以避免由於使用者快速在某個元素執行動畫時，由於動畫積累而導致的動畫和使用者的行為不一致。（這個屬性還是蠻重要的，詳見《鋒利jq》p129）

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

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

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

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

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

for my lover,c.

and thank you , mr.lee.

jQuery基礎動畫效果

jquery 動畫效果

JQuery動畫效果

jQuery 效果動畫

jQuery基礎 動畫效果

jquery 動畫效果

JQuery動畫效果

jQuery 效果 動畫

相關推薦

jQuery基礎動畫效果

jQuery 效果動畫