jquery 延遲執行實例介紹

2019-11-20 22:23:01

字體：大中小

來源：轉載

供稿：網友

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

以上代碼讓頁面中的按鈕在頁面加載后500毫秒隱藏，然后再過1500毫秒顯示出來。

復制代碼代碼如下:

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

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

復制代碼代碼如下:

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

以上代碼同樣只隱藏，不會再顯示，相比代碼2，queue里的代碼沒有調dequeue，由此可知，queue執行完后，也中止了動畫隊列的繼續執行，需要調用dequeue使其執行下去（這里queue里的hide()不是一個動畫，而將當前對象的動畫放在queue里執行也會有問題）。

復制代碼代碼如下:

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

以上代碼只隱藏，而不會再顯示！！這里show不再指定顯示動畫時長，則show方法不再是一個動畫。由此可知，dequeue只能使得動畫隊列中的后續方法執行下去，不能使非動畫隊列中的jquery方法繼續執行！

上一篇：jQuery回車實現登錄簡單實現

下一篇：多種方式實現JS調用后臺方法進行數據交互