jquery 延遲執行實例介紹_jquery

複製程式碼 程式碼如下:

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

以上程式碼讓頁面中的按鈕在頁面載入後500毫秒隱藏，然後再過1500毫秒顯示出來。

複製程式碼 程式碼如下:

$(function(){


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

//.queue(function(){$(this).show();});
});

以上程式碼效果與前面的程式碼相同。 複製程式碼

程式碼如下:


$(function(){


$(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(){

$(function(){
var $inputs = $('input[type=button]') .delay(500) .queue(function(){$(this).hide().dequeue();}) .delay (1500) .show(); //.show(1); }); 以上程式碼只隱藏，而不會再顯示！ ！這裡show不再指定顯示動畫時長，則show方法不再是一個動畫。由此可知，dequeue只能使得動畫隊列中的後續方法執行下去，不能使非動畫隊列中的jquery方法繼續執行！