jquery 延遲執(zhí)行實(shí)例介紹

更新時(shí)間：2013年08月20日 16:17:00 作者：

延遲執(zhí)行在某些特殊的情況下還是蠻有用的，實(shí)現(xiàn)的方法也很簡(jiǎn)單，本文有個(gè)不錯(cuò)的示例，有需要的朋友可以參考下，希望對(duì)大家有所幫助

 
$(function(){ 
var $inputs = $('input[type=button]') 
.delay(500) 
.queue(function(){$(this).hide().dequeue();}) 
.delay(1500) 
.queue(function(){$(this).show();}); 
}); 

以上代碼讓頁(yè)面中的按鈕在頁(yè)面加載后500毫秒隱藏，然后再過(guò)1500毫秒顯示出來(lái)。

復(fù)制代碼代碼如下:

 
$(function(){ 
var $inputs = $('input[type=button]') 
.delay(500) 
.queue(function(){$(this).hide().dequeue();}) 
.delay(1500) 
.show(1); 
//.queue(function(){$(this).show();}); 
}); 

以上代碼效果與前面的代碼相同。

復(fù)制代碼代碼如下:

 
$(function(){ 
var $inputs = $('input[type=button]') 
.delay(500) 
.queue(function(){$(this).hide();}) 
.delay(1500) 
.show(1); 
//.queue(function(){$(this).show();}); 
}); 

以上代碼同樣只隱藏，不會(huì)再顯示，相比代碼2，queue里的代碼沒(méi)有調(diào)dequeue，由此可知，queue執(zhí)行完后，也中止了動(dòng)畫隊(duì)列的繼續(xù)執(zhí)行，需要調(diào)用dequeue使其執(zhí)行下去（這里queue里的hide()不是一個(gè)動(dòng)畫，而將當(dāng)前對(duì)象的動(dòng)畫放在queue里執(zhí)行也會(huì)有問(wèn)題）。

復(fù)制代碼代碼如下:

 
$(function(){ 
var $inputs = $('input[type=button]') 
.delay(500) 
.queue(function(){$(this).hide().dequeue();}) 
.delay(1500) 
.show(); 
//.show(1); 
}); 

以上代碼只隱藏，而不會(huì)再顯示??！這里show不再指定顯示動(dòng)畫時(shí)長(zhǎng)，則show方法不再是一個(gè)動(dòng)畫。由此可知，dequeue只能使得動(dòng)畫隊(duì)列中的后續(xù)方法執(zhí)行下去，不能使非動(dòng)畫隊(duì)列中的jquery方法繼續(xù)執(zhí)行！

您可能感興趣的文章:

相關(guān)文章

單元選擇合并變色示例代碼
這篇文章主要介紹了如何實(shí)現(xiàn)單元選擇合并變色，感覺(jué)還不錯(cuò)的一個(gè)小功能，大家可以學(xué)習(xí)下
2014-05-05
jQuery插件echarts實(shí)現(xiàn)的多柱子柱狀圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件echarts實(shí)現(xiàn)的多柱子柱狀圖效果,結(jié)合完整實(shí)例形式分析了echarts繪制多柱子柱狀圖效果的操作步驟與相關(guān)實(shí)現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
2017-03-03
jQuery實(shí)現(xiàn)HTML表格單元格的合并功能
這篇文章主要介紹了jQuery實(shí)現(xiàn)HTML表格單元格的合并功能,可合并指定行與指定列上的單元格,涉及jQuery針對(duì)表格元素屬性的動(dòng)態(tài)操作技巧,需要的朋友可以參考下
2016-04-04
jQuery是用來(lái)干什么的 jquery其實(shí)就是一個(gè)js框架
jQuery是一bai個(gè)簡(jiǎn)潔而快速的JavaScript庫(kù)，可用于du簡(jiǎn)化zhi事件處理，HTML文檔遍歷，Ajax交互和dao動(dòng)畫，以更快速開(kāi)發(fā)網(wǎng)站
2021-02-02
簡(jiǎn)單實(shí)現(xiàn)限制uploadify上傳個(gè)數(shù)
本文給大家分享的是在使用uploadify上傳文件或者圖片的時(shí)候，如何做到限制上傳個(gè)數(shù)的方法，十分的簡(jiǎn)單方便實(shí)用，有需要的小伙伴可以參考下。
2015-11-11
jQuery+PHP+MySQL實(shí)現(xiàn)無(wú)限級(jí)聯(lián)下拉框效果
這篇文章主要介紹了jQuery+PHP+MySQL實(shí)現(xiàn)無(wú)限級(jí)聯(lián)效果的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-02-02
jQuery下拉友情鏈接美化效果代碼分享
這篇文章主要介紹了jQuery下拉友情鏈接美化效果，很實(shí)用的代碼，推薦給大家，有需要的小伙伴可以參考下。
2015-08-08
JQuery讀取XML文件數(shù)據(jù)并顯示的實(shí)現(xiàn)代碼
今天向大家演示如何通過(guò)JQuery框架為空白HTML文檔加載從XML文件讀取的數(shù)據(jù)并顯示出來(lái)。我們將會(huì)主要用到JQuery自帶過(guò)程$.get 。
2009-12-12
Jquery 獲取指定標(biāo)簽的對(duì)象及屬性的設(shè)置與移除
這篇文章主要介紹了Jquery如何獲取指定標(biāo)簽的對(duì)象及屬性的設(shè)置與移除,需要的朋友可以參考下
2014-05-05
jQuery實(shí)現(xiàn)購(gòu)物車數(shù)字加減效果
本文給大家分享的是jQuery實(shí)現(xiàn)購(gòu)物車數(shù)字加減效果的3種實(shí)現(xiàn)方法，分別是左右加減數(shù)字、Bootstrap風(fēng)格，右側(cè)加減以及jQuery ui風(fēng)格，右側(cè)加減，效果非常棒，需要的小伙伴來(lái)參考下吧。
2015-03-03