javascript - 使用 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').