javascript - 使用 jQuery.queue 而不是 setTimeout

Question

我想将一个元素附加到 DOM，然后添加一个带有过渡的类以应用滑动效果。目前我正在使用延迟为 0 的 setInterval()，否则不会发生转换 (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').