jQuery，動(dòng)畫(huà)效果

?

學(xué)習(xí)要點(diǎn)：

　　1.顯示、隱藏

　　2.滑動(dòng)、卷動(dòng)

　　3.淡入、淡出

　　4.自定義動(dòng)畫(huà)

　　5.列隊(duì)動(dòng)畫(huà)方法

　　6.動(dòng)畫(huà)相關(guān)方法

　　7.動(dòng)畫(huà)全局屬性

?

一．顯示、隱藏

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

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

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

?

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

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

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

?

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

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

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

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

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

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

列隊(duì)動(dòng)畫(huà)，使用函數(shù)名調(diào)用自身，遞歸

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

列隊(duì)動(dòng)畫(huà)，使用 arguments.callee 匿名函數(shù)自調(diào)用

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

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

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

?

二．滑動(dòng)、卷動(dòng)，向上收縮，向下展開(kāi)

jQuery 提供了一組改變?cè)馗叨鹊姆椒?#xff1a;.slideUp()、.slideDown()和.slideToggle()。顧名 思義，向上收縮(卷動(dòng))和向下展開(kāi)(滑動(dòng))。

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

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

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

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

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

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

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

?

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

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

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

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

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

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

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

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

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

?

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

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

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

?

?

四．自定義動(dòng)畫(huà)

jQuery 提供了幾種簡(jiǎn)單常用的固定動(dòng)畫(huà)方面我們使用。但有些時(shí)候，這些簡(jiǎn)單動(dòng)畫(huà)無(wú)法 滿足我們更加復(fù)雜的需求。這個(gè)時(shí)候，jQuery 提供了一個(gè).animate()方法來(lái)創(chuàng)建我們的自定 義動(dòng)畫(huà)，滿足更多復(fù)雜多變的要求。

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

注意：必填參數(shù)對(duì)象里的css參數(shù)是同步執(zhí)行的，也就是說(shuō)對(duì)象里的css效果是同步動(dòng)畫(huà)

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

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

?

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

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

?

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

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

?

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

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

?

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

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

注意：如果不是同一個(gè)元素，就會(huì)實(shí)現(xiàn)同步動(dòng)畫(huà)

?

通過(guò)連綴實(shí)現(xiàn)列隊(duì)動(dòng)畫(huà)?

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

通過(guò)回調(diào)函數(shù)實(shí)現(xiàn)列隊(duì)動(dòng)畫(huà)

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

?

animate()方法中，運(yùn)動(dòng)方式，自帶的參數(shù)有兩個(gè)：swing(緩動(dòng))、 linear(勻速)，默認(rèn)為 swing。寫(xiě)在毫秒數(shù)后面

animate()方法中，還有一個(gè)參數(shù)，easing 運(yùn)動(dòng)方式，這個(gè)參數(shù)，大部分參數(shù)值 需要通過(guò)插件來(lái)使用，在后面的課程中，會(huì)詳細(xì)講解。自帶的參數(shù)有兩個(gè)：swing(緩動(dòng))、 linear(勻速)，默認(rèn)為 swing。

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

?

?

五．列隊(duì)動(dòng)畫(huà)方法

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

連綴無(wú)法實(shí)現(xiàn)按順序列隊(duì)

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

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

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

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

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

queue()方法，像列隊(duì)動(dòng)畫(huà)后面添加一個(gè)列隊(duì)，參數(shù)是匿名函數(shù)，函數(shù)里寫(xiě)要添加的列隊(duì)，函數(shù)里執(zhí)行next()方法，可以連綴添加列隊(duì)

?

使用.queue()方法模擬動(dòng)畫(huà)方法跟隨動(dòng)畫(huà)方法之后

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

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

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

使用 next 參數(shù)來(lái)實(shí)現(xiàn)繼續(xù)調(diào)用列隊(duì)動(dòng)畫(huà)

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

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

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

使用.dequeue()方法執(zhí)行下一個(gè)函數(shù)動(dòng)畫(huà)

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

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

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

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

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

queue()方法還有一個(gè)功能，就是可以得到當(dāng)前動(dòng)畫(huà)個(gè)列隊(duì)的長(zhǎng)度。當(dāng)然，這個(gè)用法在 普通 Web 開(kāi)發(fā)中用的比較少，

獲取當(dāng)前列隊(duì)的長(zhǎng)度，fx 是默認(rèn)列隊(duì)的參數(shù)

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

?

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

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

//清理動(dòng)畫(huà)列隊(duì) $('#box').slideDown('slow', function () {$(this).clearQueue()});

?

?六．動(dòng)畫(huà)相關(guān)方法

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

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

無(wú)參停止動(dòng)畫(huà)

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

有參停止列隊(duì)動(dòng)畫(huà)

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

注意：第一個(gè)參數(shù)表示是否取消列隊(duì)動(dòng)畫(huà)，默認(rèn)為 false。如果參數(shù)為 true，當(dāng)有列隊(duì)動(dòng) 畫(huà)的時(shí)候，會(huì)取消后面的列隊(duì)動(dòng)畫(huà)。第二參數(shù)表示是否到達(dá)當(dāng)前動(dòng)畫(huà)結(jié)尾，默認(rèn)為 false。 如果參數(shù)為 true，則停止后立即到達(dá)末尾處。

?

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

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

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

?

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

遞歸一直動(dòng)畫(huà)

animated查找正在運(yùn)動(dòng)的動(dòng)畫(huà)

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

?

六．動(dòng)畫(huà)全局屬性

jQuery 提供了兩種全局設(shè)置的屬性，分別為：$.fx.interval，設(shè)置每秒運(yùn)行的幀數(shù)；$.fx.off， 關(guān)閉頁(yè)面上所有的動(dòng)畫(huà)。

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

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

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

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

?

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

總結(jié)

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

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