[jQuery知識]動畫高級

前言

1.自定義動畫
2.列隊動畫方法
3.動畫相關方法
4.動畫全局屬性

一.自定義動畫
jQuery 提供瞭幾種簡單常用的固定動畫方面我們使用。但有些時候,這些簡單動畫無法 滿足我們更加復雜的需求。這個時候,jQuery 提供瞭一個.animate()方法來創建我們的自定義動畫,滿足更多復雜多變的要求。

$('.animate').click(function () { 
$('#box').animate({
'width' : '300px', 
'height' : '200px',
 'fontSize' : '50px',
  'opacity' : 0.5
});
 });

註意:一個 CSS 變化就是一個動畫效果,上面的例子中,已經有四個 CSS 變化,已經 實現瞭多重動畫同步運動的效果。

必傳的參數隻有一個,就是一個鍵值對 CSS 變化樣式的對象。還有兩個可選參數分別 為速度和回調函數。

$('.animate').click(function () { 
$('#box').animate({
'width' : '300px',
'height' : '200px' }, 1000, function () {
alert('動畫執行完畢執行我!'); });
});

到目前位置,我們都是創建的固定位置不動的動畫。如果想要實現運動狀態的位移動畫, 那就必須使用自定義動畫,並且結合 CSS 的絕對定位功能。

$('.animate').click(function () { 
$('#box').animate({
'top' : '300px',//先必須設置 CSS 絕對定位
'left' : '200px' });
});

自定義動畫中,每次開始運動都必須是初始位置或初始狀態,而有時我們想通過當前位 置或狀態下再進行動畫。jQuery 提供瞭自定義動畫的累加、累減功能。

$('.animate').click(function () {
 $('#box').animate({
'left' : '+=100px',
 });
});

自定義實現列隊動畫的方式,有兩種:1.在回調函數中再執行一個動畫;2.通過連綴或 順序來實現列隊動畫。

//通過依次順序實現列隊動畫
$('.animate').click(function () {
 $('#box').animate({'left' : '100px'}); $('#box').animate({'top' : '100px'}); $('#box').animate({'width' : '300px'});
});

註意:如果不是同一個元素,就會實現同步動畫

 //通過連綴實現列隊動畫
 $('.animate').click(function () {
$('#box').animate({ 'left' : '100px'
}).animate({
'top' : '100px'
}).animate({
'width' : '300px'
}); });
//通過回調函數實現列隊動畫
 $('.animate').click(function () {
$('#box').animate({
 'left' : '100px'
}, 
function () { 
$('#box').animate({
'top' : '100px' },
 function () {
$('#box').animate({ '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 () {
$(this).css('background', 'orange'); 
});

現在,我們想繼續在.queue()方法後面再增加一個隱藏動畫,這時發現居然無法實現。 這是.queue()特性導致的。有兩種方法可以解決這個問題,jQuery 的.queue()的回調函數可以 傳遞一個參數,這個參數是 next 函數,在結尾處調用這個 next()方法即可再連綴執行列隊動 畫。

//使用 next 參數來實現繼續調用列隊動畫 $('#box').slideUp('slow').slideDown('slow').queue(function (next) {
$(this).css('background', 'orange');
next(); }).hide('slow');

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

//使用.dequeue()方法執行下一個函數動畫 $('#box').slideUp('slow').slideDown('slow').queue(function () {
$(this).css('background', 'orange');
$(this).dequeue(); }).hide('slow');

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

//使用順序調用的列隊,逐個執行,非常清晰 $('#box').slideUp('slow');
 $('#box').slideDown('slow');
  $('#box').queue(function () {
$(this).css('background', 'orange');
$(this).dequeue(); })
$('#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(); });
//帶參數的強制運行 
$('.animate').click(function () {
$('#box').animate({ 'left' : '300px'
}, 1000); 
$('#box').animate({
'bottom' : '300px' }, 1000);
$('#box').animate({ 'width' : '300px'
}, 1000); 
$('#box').animate({
'height' : '300px' }, 1000);
});


$('.stop').click(function () {
 $('#box').stop(true ,true);
});

註意:第一個參數表示是否取消列隊動畫,默認為 false。如果參數為 true,當有列隊動 畫的時候,會取消後面的列隊動畫。第二參數表示是否到達當前動畫結尾,默認為 false。 如果參數為 true,則停止後立即到達末尾處。

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

//開始延遲 1 秒鐘,中間延遲 1 秒 
$('.animate').click(function () {
$('#box').delay(1000).animate({
 'left' : '300px'
}, 1000);

 $('#box').animate({
'bottom' : '300px' }, 1000);
$('#box').delay(1000).animate({ 'width' : '300px'
}, 1000);

 $('#box').animate({
'height' : '300px' }, 1000);
});

在選擇器的基礎章節中,我們提到過一個過濾器:animated,這個過濾器可以判斷出當前 運動的動畫是哪個元素。通過這個特點,我們可以避免由於用戶快速在某個元素執行動畫時, 由於動畫積累而導致的動畫和用戶的行為不一致。

//遞歸執行自我,無線循環播放 $('#box').slideToggle('slow', function () {
$(this).slideToggle('slow', arguments.callee); 
});


//停止正在運動的動畫,並且設置紅色背景 $('.button').click(function(){
$('p:animated').stop().css('background', 'red'); 
});

四.動畫全局屬性

jQuery 提供瞭兩種全局設置的屬性,分別為:.fx.interval,設置每秒運行的幀數;.fx.off, 關閉頁面上所有的動畫。
$.fx.interval 屬性可以調整動畫每秒的運行幀數,默認為 13 毫秒。數字越小越流暢,但 可能影響瀏覽器性能。

//設置運行幀數為 1000 毫秒
 $.fx.interval = 1000;
$('.button').click(function () {
 $('#box').toggle(3000);
});

$.fx.off 屬性可以關閉所有動畫效果,在非常低端的瀏覽器,動畫可能會出現各種異常 問題導致錯誤。而 jQuery 設置這個屬性,就是用於關閉動畫效果的。

//設置動畫為關閉 true
$.fx.off = true; //默認為 false

補充:在.animate()方法中,還有一個參數,easing 運動方式,這個參數,大部分參數值 需要通過插件來使用,在後面的課程中,會詳細講解。自帶的參數有兩個:swing(緩動)、 linear(勻速),默認為 swing。

$('.button').click(function () { 
$('#box').animate({
left : '800px' }, 'slow', 'swing');
$('#pox').animate({ left : '800px' }, 'slow', 'linear');
});本文轉自:https://blog.csdn.net/BaiHuaXiu123/article/details/53511902 謝謝~

發佈留言