JQuery中queue方法用法示例
本文實(shí)例講述了JQuery中queue方法用法。分享給大家供大家參考,具體如下:
jquery的queue方法
顯示或操作在匹配元素上執(zhí)行的函數(shù)隊(duì)列
意思就是對(duì)匹配上的元素,顯示作用在這個(gè)元素上的函數(shù)的個(gè)數(shù),也就是上述所說(shuō)的“顯示”,而操作則是更改這些作用在該元素上的函數(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è)(在沒(méi)有執(zhí)行$("div").slideUp("normal", runIt);這個(gè)語(yǔ)句的時(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)開(kāi)始執(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í)候的序列長(zhǎng)度,這個(gè)不管一般也用不上
而是如何用queue來(lái)操作函數(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)畫>序列,忘記說(shuō)明$("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)畫開(kāi)始后立馬就執(zhí)行了,而放在自定義函數(shù)內(nèi)部則不會(huì)出現(xiàn)這個(gè)問(wèn)題。 }); $("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的作用,它主要還是用來(lái)替換和刪除動(dòng)畫效果,新增的話可以用其他代替 $("div").stop(); });
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery常見(jiàn)事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- jQuery隊(duì)列控制方法詳解queue()/dequeue()/clearQueue()
- jQuery中queue()方法用法實(shí)例
- jquery隊(duì)列queue與原生模仿其實(shí)現(xiàn)方法分享
- jQuery中隊(duì)列queue()函數(shù)的實(shí)例教程
- jQuery 事件隊(duì)列調(diào)整方法
- jquery隊(duì)列函數(shù)用法實(shí)例
- 用隊(duì)列模擬jquery的動(dòng)畫算法實(shí)例
- 利用Jquery隊(duì)列實(shí)現(xiàn)根據(jù)輸入數(shù)量顯示的動(dòng)畫
- jQuery使用動(dòng)畫隊(duì)列自定義動(dòng)畫操作示例
相關(guān)文章
jquery中each遍歷對(duì)象和數(shù)組示例
jquery中each可用于遍歷對(duì)象和數(shù)組,如需退出each循環(huán)可使回調(diào)函數(shù)返回false,下面有個(gè)示例,大家可以看看2014-08-08jQuery插件jcrop+Fileapi完美實(shí)現(xiàn)圖片上傳+裁剪+預(yù)覽的代碼分享
這篇文章主要介紹了jQuery插件jcrop+Fileapi完美實(shí)現(xiàn)圖片上傳+裁剪+預(yù)覽的代碼,非常的簡(jiǎn)單實(shí)用,效果也很棒,有需要的小伙伴可以參考下。2015-04-04Django中使用jquery的ajax進(jìn)行數(shù)據(jù)交互的實(shí)例代碼
這篇文章主要介紹了Django中使用jquery的ajax進(jìn)行數(shù)據(jù)交互的相關(guān)知識(shí),非常不錯(cuò),具有參考借鑒價(jià)值 ,需要的朋友可以參考下2017-10-10基于Jquery的跨域傳輸數(shù)據(jù)(JSONP)
基于Jquery的跨域傳輸數(shù)據(jù)(JSONP) ,需要的朋友可以參考下。2011-03-03圣誕節(jié)Merry Christmas給博客添加浪漫的下雪效果基于jquery實(shí)現(xiàn)
一年一度的圣誕節(jié)又到了,首先祝大家好運(yùn)一串串,健康一年年,平安到永遠(yuǎn)!今天就教大家如何在博客中添加紛紛揚(yáng)揚(yáng)的下雪效果。今天,你那里下雪了嗎2012-12-12動(dòng)態(tài)標(biāo)簽 懸停效果 延遲加載示例代碼
懸停效果、延遲加載想必大家都有見(jiàn)到過(guò)吧,在本文將為大家介紹下是如何實(shí)現(xiàn)的,感興趣的朋友不要錯(cuò)過(guò)2013-11-11JQuery操作表格(隔行著色,高亮顯示,篩選數(shù)據(jù))
最近項(xiàng)目里對(duì)表格的操作比較多。以往我們要做一些效果的時(shí)候往往通過(guò)程序代碼來(lái)實(shí)現(xiàn),這個(gè)努力不值,因?yàn)镴Query是完全可以做到的,并且是客戶端運(yùn)行,不經(jīng)過(guò)服務(wù)器處理,給用戶的反應(yīng)快,也減少了服務(wù)器壓力2012-02-02