queue方法怎么在JQuery中使用?相信很多沒有經驗的人對此束手無策,為此本文總結了問題出現的原因和解決方法,通過這篇文章希望你能解決這個問題。
jquery的queue方法
顯示或操作在匹配元素上執行的函數隊列
意思就是對匹配上的元素,顯示作用在這個元素上的函數的個數,也就是上述所說的“顯示”,而操作則是更改這些作用在該元素上的函數隊列
舉個例子:
<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元素的函數,一共為8個(在沒有執行$("div").slideUp("normal", runIt);這個語句的時候顯示的結果是8個,每次執行完一個都會減少一個,但是當所有動作執行完又再次執行RUNIT()的時候,結果就不是八而是十六了,很明顯它把原本執行完的序列,原本應該為0的時候它卻是8+8而不是0+8的結果顯示), //但如果你復制以上代碼發現點擊按鈕是小于8,是因為你點擊的時候動作已經開始執行,序列-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();
討論的重點不是它重復執行RUNIT()
的時候的序列長度,這個不管一般也用不上
而是如何用queue來操作函數序列
<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 () {//創建一個匿名函數作為一個<動畫>序列,忘記說明$("div").queue("fx"),默認參數是 fx, 標準的效果序列。當然你也可以將addclass這個操作自定義成一個動畫效果也是可以的,現在這種寫法,addclass也變成了一個效果函數,并成了序列的內容 $(this).addClass("newcolor"); $(this).dequeue();//插入自定義函數之后,如果還需要繼續還行隊列,則用dequeue(),如果不用這個函數,動畫將停止,當然動畫序列還是在的,這并不是意味著刪除剩下的序列,這代碼只能放自定義函數最后面,如果放在外面會有意料之外的效果,比如它不是按照播放完一個動畫再執行自定義函數里面的內容,而是在上一個動畫開始后立馬就執行了,而放在自定義函數內部則不會出現這個問題。 }); $("div").animate({left:'-=200'},1500); $("div").queue(function () { $(this).removeClass("newcolor"); $(this).dequeue(); }); $("div").slideUp(); }); $("#stop").click(function () { $("div").queue("fx", []);//stop是結束當前正在進行的動畫,如果除了當前動畫還有后續動畫,則會立馬執行下一個動畫,而這一句是將序列用新的數組(這里是空數組)代替原本的序列,意味著,刪除了剩下的所有動畫序列,所以這里就能體現出queue的作用,它主要還是用來替換和刪除動畫效果,新增的話可以用其他代替 $("div").stop(); });
看完上述內容,你們掌握queue方法怎么在JQuery中使用的方法了嗎?如果還想學到更多技能或想了解更多相關內容,歡迎關注創新互聯成都網站設計公司行業資訊頻道,感謝各位的閱讀!
另外有需要云服務器可以了解下創新互聯scvps.cn,海內外云服務器15元起步,三天無理由+7*72小時售后在線,公司持有idc許可證,提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業上云的綜合解決方案,具有“安全穩定、簡單易用、服務可用性高、性價比高”等特點與優勢,專為企業上云打造定制,能夠滿足用戶豐富、多元化的應用場景需求。
網站名稱:queue方法怎么在JQuery中使用-創新互聯
文章鏈接:http://vcdvsql.cn/article38/cdsjpp.html
成都網站建設公司_創新互聯,為您提供ChatGPT、搜索引擎優化、虛擬主機、網站建設、網站制作、網站內鏈
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯