Используйте jQuery.queue вместо setTimeout

Question

Я хочу добавить элемент в DOM, а затем добавить класс с переходом для применения скользящего эффекта. В настоящее время я использую setInterval() с задержкой 0, в противном случае переход не произойдет (demo):

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

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

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

Я хочу использовать jQuery.queue вместо этого, но с моим нынешним подходом он не работает: добавление элемента и добавление класса происходит сразу, поэтому переход не отображается.

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

Answer 1

Если тайм-аут требуется, чтобы анимация происходит, то вы должны добавить 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').