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')的目的无效。

使用jQuery.queue而不是setTimeout

1 个答案: