使用jQuery.queue，而不是setTimeout

我想追加一個元素到DOM，然後添加一個類與轉換應用滑動效果。目前我使用setInterval()與0延遲，否則轉換不會發生（demo）：使用jQuery.queue，而不是setTimeout

var $block = $('<div/>', {class: 'block'}); 

$('body').append($block); 

setTimeout(function() { 
    $block.addClass('shifted'); 
}, 0);

我想利用jQuery.queue代替，但我目前的做法是行不通：附加的元素，一次添加該類，因此不顯示任何轉換。

$('body') 
    .append($block) 
    .queue(function() { 
     $block.addClass('shifted'); 
    });

來源

2013-12-08 Pavlo

'class'是JS中的一個保留字，所以你的對象字面值應該使用一個字符串作爲關鍵字（即'{'class'：'block'}'）。 – zzzzBov

[保留字實際上只適用於標識符]（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Reserved_Words#Reserved_word_usage），屬性名稱是一個標識符。它不應該由規格引起任何問題。 – Pavlo

如果需要超時，以動畫發生，那麼你應該添加一個delay：

$('body') 
    .append($block) 
    .delay(0) 
    .queue(function (next) { 
     $block.addClass('shifted'); 
     next(); //don't forget to dequeue so that the rest of the queue can run 
    });

.delay()實際上只是一個方便的方法：

.queue(function (n) { 
    setTimeout(n, duration); 
});

如果您不要調用delay（或排隊超時），fx隊列將立即執行，這就排除了排隊$block.addClass('shifted')的目的。

來源

2013-12-09 06:20:16 zzzzBov

那麼可能放下'queue'？只要執行'append' - 'delay' - 'addClass'？ – Pavlo

'addClass'不會將自己添加到fx隊列中。我的觀點是，如果沒有調用'delay'函數，你的代碼和'$ block.appendTo（'body'）。addClass（'shifted'）;'一樣運行。爲了讓它在超時後運行'addClass'，你需要以某種方式延遲。 – zzzzBov

使用jQuery.queue，而不是setTimeout

回答

相關問題