jQuery，動畫效果

?

學(xué)習(xí)要點：

　　1.顯示、隱藏

　　2.滑動、卷動

　　3.淡入、淡出

　　4.自定義動畫

　　5.列隊動畫方法

　　6.動畫相關(guān)方法

　　7.動畫全局屬性

?

一．顯示、隱藏

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

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

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

?

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

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

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

?

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

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

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

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

使用.show()和.hide()的回調(diào)函數(shù)，可以實現(xiàn)列隊動畫效果

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

列隊動畫，使用函數(shù)名調(diào)用自身，遞歸

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

列隊動畫，使用 arguments.callee 匿名函數(shù)自調(diào)用

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

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

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

?

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

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

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

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

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

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

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

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

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

?

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

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

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

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

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

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

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

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

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

?

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

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

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

?

?

四．自定義動畫

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

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

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

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

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

?

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

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

?

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

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

?

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

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

?

自定義實現(xiàn)列隊動畫的方式，有兩種：1.在回調(diào)函數(shù)中再執(zhí)行一個動畫；2.通過連綴或 順序來實現(xiàn)列隊動畫。

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

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

?

通過連綴實現(xiàn)列隊動畫?

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

通過回調(diào)函數(shù)實現(xiàn)列隊動畫

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

?

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

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

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

?

?

五．列隊動畫方法

之前我們已經(jīng)可以實現(xiàn)列隊動畫了，如果是同一個元素，可以依次順序或連綴調(diào)用。如 果是不同元素，可以使用回調(diào)函數(shù)。但有時列隊動畫太多，回調(diào)函數(shù)的可讀性大大降低。為 此，jQuery 提供了一組專門用于列隊動畫的方法。

連綴無法實現(xiàn)按順序列隊

$('#box').slideUp('slow').slideDown('slow').css('background', 'orange');

注意：如果動畫方法，連綴可以實依次列隊，而.css()方法不是動畫方法，會在一開始 傳入列隊之前。那么，可以采用動畫方法的回調(diào)函數(shù)來解決。

使用回調(diào)函數(shù)，強行將.css()方法排隊到.slideDown()之后

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

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

queue()方法，像列隊動畫后面添加一個列隊，參數(shù)是匿名函數(shù)，函數(shù)里寫要添加的列隊，函數(shù)里執(zhí)行next()方法，可以連綴添加列隊

?

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

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

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

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

使用 next 參數(shù)來實現(xiàn)繼續(xù)調(diào)用列隊動畫

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

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

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

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

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

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

如果采用順序調(diào)用，那么使用列隊動畫方法，就非常清晰了，每一段代表一個列隊，而 回調(diào)函數(shù)的嵌套就會雜亂無章。

使用順序調(diào)用的列隊，逐個執(zhí)行，非常清晰

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

queue()方法還有一個功能，就是可以得到當前動畫個列隊的長度。當然，這個用法在 普通 Web 開發(fā)中用的比較少，

獲取當前列隊的長度，fx 是默認列隊的參數(shù)

function count() { return $("#box").queue('fx').length; } //在某個動畫處調(diào)用 $('#box').slideDown('slow', function () {alert(count());});

?

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

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

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

?

?六．動畫相關(guān)方法

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

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

無參停止動畫

//動畫按鈕$('.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); //停止動畫，參數(shù)1布爾值、是否清空未執(zhí)行完的動畫列隊，參數(shù)2布爾值、是否直接將正在執(zhí)行的動畫跳轉(zhuǎn)到末狀態(tài)});

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

?

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

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

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

?

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

遞歸一直動畫

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 提供了兩種全局設(shè)置的屬性，分別為：$.fx.interval，設(shè)置每秒運行的幀數(shù)；$.fx.off， 關(guān)閉頁面上所有的動畫。

$.fx.interval 屬性可以調(diào)整動畫每秒的運行幀數(shù)，默認為 13 毫秒。數(shù)字越小越流暢，但 可能影響瀏覽器性能。

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

$.fx.off 屬性可以關(guān)閉所有動畫效果，在非常低端的瀏覽器，動畫可能會出現(xiàn)各種異常 問題導(dǎo)致錯誤。而 jQuery 設(shè)置這個屬性，就是用于關(guān)閉動畫效果的。

//設(shè)置動畫為關(guān)閉 true $.fx.off = true; //默認為 false

?

轉(zhuǎn)載于:https://www.cnblogs.com/adc8868/p/6522411.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。