jQuery，動畫效果

?

學習要點：

　　1.顯示、隱藏

　　2.滑動、卷動

　　3.淡入、淡出

　　4.自定義動畫

　　5.列隊動畫方法

　　6.動畫相關方法

　　7.動畫全局屬性

?

一．顯示、隱藏

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

show()方法，顯示元素，不傳參直接顯示，傳參，參數是毫秒數來控制速度，傳參后富含了勻速變大，以及透明度變換。參數2回調函數，可以實現列隊和其他操作

$('.button').on('click',function () {$('#box').show();}); $('.button').on('click',function () {$('#box').show(1000);});

?

hide()方法，隱藏元素，不傳參直接隱藏，傳參，參數是毫秒數來控制速度，傳參后富含了勻速變小，以及透明度變換。參數2回調函數，可以實現列隊和其他操作

$('.button').on('click',function () {$('#box').hide();}); $('.button').on('click',function () {$('#box').hide(1000);});

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

?

除了直接使用毫秒來控制速度外，jQuery 還提供了三種預設速度參數字符串：slow、 normal 和 fast，分別對應 600 毫秒、400 毫秒和 200 毫秒。

$('.show').click(function () {$('#box').show('fast'); //200 毫秒 });$('.hide').click(function () {$('#box').hide('slow'); //600 毫秒});

注意：不管是傳遞毫秒數還是傳遞預設字符串，如果不小心傳遞錯誤或者傳遞空字符串。 那么它將采用默認值：400 毫秒。

$('.show').click(function () { $('#box').show(''); //默認 400 毫秒 });

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

$('.show').click(function () {$('#box').show('slow', function () {alert('動畫持續完畢后，執行我！');});});

列隊動畫，使用函數名調用自身，遞歸

$('.show').click(function () {$('div').first().show('fast', function showSpan() {$(this).next().show('fast', showSpan);});});

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

$('.hide').click(function () {$('div').last().hide('fast', function () {$(this).prev().hide('fast', arguments.callee);});});

toggle()方法，隱藏和顯示自動來回切換，也有兩個可選參數，參數1毫秒數，參數2回調函數

$('.button').on('click', function () {$('#box').toggle(1000);});

?

二．滑動、卷動，向上收縮，向下展開

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

slideUp()方法，將元素向上收縮，也有兩個可選參數，參數1毫秒數，參數2回調函數

$('.button').on('click', function () {$('#box').slideUp(1000);});

slideDown()方法，將元素向下展開，也有兩個可選參數，參數1毫秒數，參數2回調函數

$('.button').on('click', function () {$('#box').slideDown(1000);});

slideToggle()方法，將元素向下展開和向上收縮來回切換，也有兩個可選參數，參數1毫秒數，參數2回調函數

$('.button').on('click', function () {$('#box').slideToggle(1000);});

注意：滑動、卷動效果和顯示、隱藏效果一樣，具有相同的參數。

?

三．淡入、淡出，透明度變化

jQuery 提供了一組專門用于透明度變化的方法：.fadeIn()和.fadeOut()，分別表示淡入、 淡出，當然還有一個自動切換的方法：.fadeToggle()。

fadeIn()方法，將元素從0到100的透明度淡入，也有兩個可選參數，參數1毫秒數，參數2回調函數

$('.button').on('click', function () {$('#box').fadeIn(1000);});

fadeOut()方法，將元素從100到0的透明度淡出，也有兩個可選參數，參數1毫秒數，參數2回調函數

$('.button').on('click', function () {$('#box').fadeOut(1000);});

fadeToggle()方法，將元素從100到0的透明度淡出、和從0到100的透明度淡入、來回切換，也有兩個可選參數，參數1毫秒數，參數2回調函數

$('.button').on('click', function () {$('#box').fadeToggle(1000);});

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

?

fadeTo()方法，將元素原本透明度到指定透明度，3個參數，參數1毫秒數動畫速度，參數2終點透明度，參數3回調函數

$('.button').on('click', function () {$('#box').fadeTo(1000,0.3);});

?注意：淡入、淡出效果和顯示、隱藏效果一樣，具有相同的參數。對于.fadeTo()方法， 如果本身透明度大于指定值，會淡出，否則相反。

?

?

四．自定義動畫

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

animate()方法，自定義動畫，3個參數，參數1必填，是一個對象、對象里是鍵值對方式的css屬性和值，參數2是毫米數速度[可選參數]，參數3是回調函數[可選]

注意：必填參數對象里的css參數是同步執行的，也就是說對象里的css效果是同步動畫

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

注意：一個 CSS 變化就是一個動畫效果，上面的例子中，已經有四個 CSS 變化，已經 實現了多重動畫同步運動的效果。

?

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

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

?

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

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

?

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

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

?

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

$('.button').on('click', function () {$('#box').animate({'left': '100px'});$('#box').animate({'top': '100px'});$('#box').animate({'width': '300px'});});

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

?

通過連綴實現列隊動畫?

$('.button').on('click', function () {$('#box').animate({'left': '100px'}).animate({'top': '100px'}).animate({'width': '300px'});});

通過回調函數實現列隊動畫

$('.button').on('click', function () {$('#box').animate({'left': '100px'}, function () {$('#box').animate({'top': '100px'}, function () {$('#box').animate({'width': '300px'});});});});

?

animate()方法中，運動方式，自帶的參數有兩個：swing(緩動)、 linear(勻速)，默認為 swing。寫在毫秒數后面

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

//動畫按鈕$('.button1').on('click', function () {$('#box').animate({left: '800px'}, 'slow', 'swing');$('#pox').animate({left: '800px'}, 'slow', 'linear');});

?

?

五．列隊動畫方法

之前我們已經可以實現列隊動畫了，如果是同一個元素，可以依次順序或連綴調用。如 果是不同元素，可以使用回調函數。但有時列隊動畫太多，回調函數的可讀性大大降低。為 此，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()方法，像列隊動畫后面添加一個列隊，參數是匿名函數，函數里寫要添加的列隊，函數里執行next()方法，可以連綴添加列隊

?

使用.queue()方法模擬動畫方法跟隨動畫方法之后

$('#box').slideUp('slow').slideDown('slow').queue(function () {$(this).css('background', 'orange'); });

queue()方法，連綴，函數里執行next()方法，可以連綴添加列隊

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

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

next()方法，執行在queue()方法的匿名函數里，使其queue()方法可以繼續連綴列隊

$('#box').slideUp('slow').slideDown('slow').queue(function (next) {$(this).css('background', 'orange');next(); }).hide('slow');

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

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

dequeue()方法，執行在queue()方法的匿名函數里，使其queue()方法可以繼續連綴列隊

$('#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());});

?

clearQueue()方法，清除后面的列隊動畫，執行在一個列隊的回調函 數或.queue()方法里

jQuery 還提供了一個清理列隊的功能方法：.clearQueue()。把它放入一個列隊的回調函 數或.queue()方法里，就可以把剩下未執行的列隊給移除。

//清理動畫列隊 $('#box').slideDown('slow', function () {$(this).clearQueue()});

?

?六．動畫相關方法

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

stop()方法，無參停止正在運動的動畫，有兩個可選參數，參數1布爾值、是否清空未執行完的動畫列隊，參數2布爾值、是否直接將正在執行的動畫跳轉到末狀態

無參停止動畫

//動畫按鈕$('.button1').on('click', function () {$('#box').animate({'left': '800px'},3000);});//停止動畫按鈕$('.button2').on('click',function () {$('#box').stop(); //停止動畫});

有參停止列隊動畫

//動畫按鈕$('.button1').on('click', function () {//列隊動畫$('#box').animate({'left': '300px'}, 1000);$('#box').animate({'bottom': '300px'}, 1000);$('#box').animate({'width': '300px'}, 1000);$('#box').animate({'height': '300px'}, 1000);});//停止動畫按鈕$('.button2').on('click', function () {$('#box').stop(true,true); //停止動畫，參數1布爾值、是否清空未執行完的動畫列隊，參數2布爾值、是否直接將正在執行的動畫跳轉到末狀態});

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

?

delay()方法，延遲執行動畫，參數是要延遲的毫米數

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

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

?

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

遞歸一直動畫

animated查找正在運動的動畫

//動畫按鈕 $('.button1').on('click', function () {// $('div').slideToggle('slow', function () {$(this).slideToggle('slow', arguments.callee); //arguments.callee 表示自身 });});//停止動畫按鈕$('.button2').on('click', function () {$('div:animated').stop(); // 查找所有div，將正在運動的動畫停止掉});

?

六．動畫全局屬性

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

?

轉載于:https://www.cnblogs.com/adc8868/p/6522411.html

總結

以上是生活随笔為你收集整理的第一百七十二节，jQuery，动画效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。