使用jQuery.queue而不是setTimeout

Use jQuery.queue instead of setTimeout

本文关键字：setTimeout jQuery queue 使用      更新时间：2024-05-22

我想向DOM添加一个元素，然后添加一个带有转换的类来应用滑动效果。目前我使用的是延迟为0的setInterval()，否则不会发生转换（演示）：

var $block = $('<div/>', {class: 'block'});
$('body').append($block);
setTimeout(function () {
    $block.addClass('shifted');
}, 0);

我想使用jQuery.queue，但用我目前的方法，它不起作用：添加元素和添加类同时发生，所以没有显示转换。

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

如果需要超时才能制作动画，则应添加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')的目的背道而驰。

相关文章：