JQuery中queue方法用法示例
本文實例講述了JQuery中queue方法用法。分享給大家供大家參考,具體如下:
jquery的queue方法
顯示或操作在匹配元素上執(zhí)行的函數(shù)隊列
意思就是對匹配上的元素,顯示作用在這個元素上的函數(shù)的個數(shù),也就是上述所說的“顯示”,而操作則是更改這些作用在該元素上的函數(shù)隊列
舉個例子:
<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個(在沒有執(zhí)行$("div").slideUp("normal", runIt);這個語句的時候顯示的結果是8個,每次執(zhí)行完一個都會減少一個,但是當所有動作執(zhí)行完又再次執(zhí)行RUNIT()的時候,結果就不是八而是十六了,很明顯它把原本執(zhí)行完的序列,原本應該為0的時候它卻是8+8而不是0+8的結果顯示),
//但如果你復制以上代碼發(fā)現(xiàn)點擊按鈕是小于8,是因為你點擊的時候動作已經開始執(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();
討論的重點不是它重復執(zhí)行RUNIT()的時候的序列長度,這個不管一般也用不上
而是如何用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)建一個匿名函數(shù)作為一個<動畫>序列,忘記說明$("div").queue("fx"),默認參數(shù)是 fx, 標準的效果序列。當然你也可以將addclass這個操作自定義成一個動畫效果也是可以的,現(xiàn)在這種寫法,addclass也變成了一個效果函數(shù),并成了序列的內容
$(this).addClass("newcolor");
$(this).dequeue();//插入自定義函數(shù)之后,如果還需要繼續(xù)還行隊列,則用dequeue(),如果不用這個函數(shù),動畫將停止,當然動畫序列還是在的,這并不是意味著刪除剩下的序列,這代碼只能放自定義函數(shù)最后面,如果放在外面會有意料之外的效果,比如它不是按照播放完一個動畫再執(zhí)行自定義函數(shù)里面的內容,而是在上一個動畫開始后立馬就執(zhí)行了,而放在自定義函數(shù)內部則不會出現(xiàn)這個問題。
});
$("div").animate({left:'-=200'},1500);
$("div").queue(function () {
$(this).removeClass("newcolor");
$(this).dequeue();
});
$("div").slideUp();
});
$("#stop").click(function () {
$("div").queue("fx", []);//stop是結束當前正在進行的動畫,如果除了當前動畫還有后續(xù)動畫,則會立馬執(zhí)行下一個動畫,而這一句是將序列用新的數(shù)組(這里是空數(shù)組)代替原本的序列,意味著,刪除了剩下的所有動畫序列,所以這里就能體現(xiàn)出queue的作用,它主要還是用來替換和刪除動畫效果,新增的話可以用其他代替
$("div").stop();
});
更多關于jQuery相關內容感興趣的讀者可查看本站專題:《jQuery常見事件用法與技巧總結》、《jQuery常用插件及用法總結》、《jQuery操作json數(shù)據技巧匯總》、《jQuery擴展技巧總結》、《jQuery常見經典特效匯總》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
相關文章
jQuery插件jcrop+Fileapi完美實現(xiàn)圖片上傳+裁剪+預覽的代碼分享
這篇文章主要介紹了jQuery插件jcrop+Fileapi完美實現(xiàn)圖片上傳+裁剪+預覽的代碼,非常的簡單實用,效果也很棒,有需要的小伙伴可以參考下。2015-04-04
Django中使用jquery的ajax進行數(shù)據交互的實例代碼
這篇文章主要介紹了Django中使用jquery的ajax進行數(shù)據交互的相關知識,非常不錯,具有參考借鑒價值 ,需要的朋友可以參考下2017-10-10
圣誕節(jié)Merry Christmas給博客添加浪漫的下雪效果基于jquery實現(xiàn)
一年一度的圣誕節(jié)又到了,首先祝大家好運一串串,健康一年年,平安到永遠!今天就教大家如何在博客中添加紛紛揚揚的下雪效果。今天,你那里下雪了嗎2012-12-12
JQuery操作表格(隔行著色,高亮顯示,篩選數(shù)據)
最近項目里對表格的操作比較多。以往我們要做一些效果的時候往往通過程序代碼來實現(xiàn),這個努力不值,因為JQuery是完全可以做到的,并且是客戶端運行,不經過服務器處理,給用戶的反應快,也減少了服務器壓力2012-02-02

