queue方法怎么在JQuery中使用-創(chuàng)新互聯(lián)

queue方法怎么在JQuery中使用？相信很多沒有經(jīng)驗(yàn)的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個(gè)問題。

創(chuàng)新互聯(lián)公司公司2013年成立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢想脫穎而出為使命，1280元雙城做網(wǎng)站,已為上家服務(wù),為雙城各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:13518219792

jquery的queue方法

顯示或操作在匹配元素上執(zhí)行的函數(shù)隊(duì)列

意思就是對匹配上的元素，顯示作用在這個(gè)元素上的函數(shù)的個(gè)數(shù)，也就是上述所說的“顯示”，而操作則是更改這些作用在該元素上的函數(shù)隊(duì)列

舉個(gè)例子：

<style>
 div { margin:3px; width:40px; height:40px;
    position:absolute; left:0px; top:30px;
    background:green; display:none; }
 div.newcolor { background:blue; }
 span { color:red; }
</style>
<button id="show">Show Length of Queue</button>
<span></span>
<div></div>

$("#show").click(function () {
   var n = $("div").queue("fx");
   $("span").text("Queue length is: " + n.length);
});
function runIt() {//里面有一系列作用于div元素的函數(shù)，一共為8個(gè)（在沒有執(zhí)行$("div").slideUp("normal", runIt);這個(gè)語句的時(shí)候顯示的結(jié)果是8個(gè)，每次執(zhí)行完一個(gè)都會(huì)減少一個(gè)，但是當(dāng)所有動(dòng)作執(zhí)行完又再次執(zhí)行RUNIT（）的時(shí)候，結(jié)果就不是八而是十六了，很明顯它把原本執(zhí)行完的序列，原本應(yīng)該為0的時(shí)候它卻是8+8而不是0+8的結(jié)果顯示），
//但如果你復(fù)制以上代碼發(fā)現(xiàn)點(diǎn)擊按鈕是小于8，是因?yàn)槟泓c(diǎn)擊的時(shí)候動(dòng)作已經(jīng)開始執(zhí)行，序列-1
   $("div").show("slow");
   $("div").animate({left:'+=200'},2000);
   $("div").slideToggle(1000);
   $("div").slideToggle("fast");
   $("div").animate({left:'-=200'},1500);
   $("div").hide("slow");
   $("div").show(1200);
   $("div").slideUp("normal", runIt);
}
runIt();

討論的重點(diǎn)不是它重復(fù)執(zhí)行RUNIT()的時(shí)候的序列長度，這個(gè)不管一般也用不上

而是如何用queue來操作函數(shù)序列

<style>
 div { margin:3px; width:40px; height:40px;
    position:absolute; left:0px; top:30px;
    background:green; display:none; }
 div.newcolor { background:blue; }
</style>
<button id="start">Start</button>
<button id="stop">Stop</button>
<div></div>

$("#start").click(function () {
   $("div").show("slow");
   $("div").animate({left:'+=200'},5000);
   $("div").queue(function () {//創(chuàng)建一個(gè)匿名函數(shù)作為一個(gè)<動(dòng)畫>序列,忘記說明$("div").queue("fx")，默認(rèn)參數(shù)是 fx, 標(biāo)準(zhǔn)的效果序列。當(dāng)然你也可以將addclass這個(gè)操作自定義成一個(gè)動(dòng)畫效果也是可以的，現(xiàn)在這種寫法，addclass也變成了一個(gè)效果函數(shù)，并成了序列的內(nèi)容
     $(this).addClass("newcolor");
     $(this).dequeue();//插入自定義函數(shù)之后，如果還需要繼續(xù)還行隊(duì)列，則用dequeue(),如果不用這個(gè)函數(shù)，動(dòng)畫將停止，當(dāng)然動(dòng)畫序列還是在的，這并不是意味著刪除剩下的序列,這代碼只能放自定義函數(shù)最后面，如果放在外面會(huì)有意料之外的效果，比如它不是按照播放完一個(gè)動(dòng)畫再執(zhí)行自定義函數(shù)里面的內(nèi)容，而是在上一個(gè)動(dòng)畫開始后立馬就執(zhí)行了，而放在自定義函數(shù)內(nèi)部則不會(huì)出現(xiàn)這個(gè)問題。
   });
   $("div").animate({left:'-=200'},1500);
   $("div").queue(function () {
     $(this).removeClass("newcolor");
     $(this).dequeue();
   });
   $("div").slideUp();
 });
 $("#stop").click(function () {
   $("div").queue("fx", []);//stop是結(jié)束當(dāng)前正在進(jìn)行的動(dòng)畫，如果除了當(dāng)前動(dòng)畫還有后續(xù)動(dòng)畫，則會(huì)立馬執(zhí)行下一個(gè)動(dòng)畫，而這一句是將序列用新的數(shù)組（這里是空數(shù)組）代替原本的序列，意味著，刪除了剩下的所有動(dòng)畫序列，所以這里就能體現(xiàn)出queue的作用，它主要還是用來替換和刪除動(dòng)畫效果，新增的話可以用其他代替
   $("div").stop();
 });

看完上述內(nèi)容，你們掌握queue方法怎么在JQuery中使用的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道，感謝各位的閱讀！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)站名稱：queue方法怎么在JQuery中使用-創(chuàng)新互聯(lián)
文章鏈接：http://muchs.cn/article38/cdsjpp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、搜索引擎優(yōu)化、虛擬主機(jī)、網(wǎng)站建設(shè)、網(wǎng)站制作、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)