使用 jQuery.queue 代替 setTimeout

【问题标题】：Use jQuery.queue instead of setTimeout使用 jQuery.queue 代替 setTimeout
【发布时间】：2013-12-09 14:26:52
【问题描述】：

我想将一个元素附加到 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');
    });

【问题讨论】：

class 是 JS 中的保留字，所以你的对象字面量应该使用字符串作为键（即{'class': 'block'}）。
Reserved Words actually only apply to Identifiers，属性名称是一个标识符。按照规范，它不应该引起任何问题。

标签： javascript jquery css-transitions settimeout jquery-queue

【解决方案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') 的目的。

【讨论】：

那么可以放弃queue 吗？就做append - delay - addClass?
addClass 不会将自身添加到 fx 队列中。我的观点是，如果不调用 delay 函数，您的代码将与 $block.appendTo('body').addClass('shifted'); 运行相同。为了让它在超时后运行addClass，你需要以某种方式延迟。