无需插件的 jQuery 链式动画

Question

在使用 jQuery 之前，我可以做一个带有延迟的链式动画，如下所示:

$("#element").delay(45).animate({ }, 45)
             .delay(45).animate({ }, 45)
             .delay(45).animate({ }, 45);

现在，自从更新到 v1.6.1 以来，它不再执行以前的操作，而是跳到最后一个动画。忽略前面的陈述。我知道我可以为每个动画执行一个 oncomplete 回调，但这会变得很困惑:

$("#element").delay(45).animate({ }, 45, function(){
    $("#element").delay(45).animate({ }, 45, function(){
        $("#element").delay(45).animate({ }, 45);
    })
}) 

有谁知道我如何以简单干净的方式完成此任务？

Answer 1

编辑:添加了 Fiddle给你玩

我不久前写了这段代码，也许它对你有用？ (抱歉，缩进困惑)

/**
 * Queue.js
 *
 * @author Arend van Waart
 *
 *  This will allow for events to be queued by timestamp
 *
 * @example
 *  queue({
 *  1000: function () {
 *       // element a na 10ms uitfaden, en daar 100ms over doen
 *       $('#menu').fadeOut(2000);
 *  },
 *  500: function () {
 *    // na 50 ms element b en c inzoemen
 *    $('#content').slideUp(2000);
 * }
 * });
 */

var queue = function(queue){
    var self = this;
    // queue
    this.queue = queue;
    // time passed is 0
    this.timePassed = 0;
    // time in ms to sleep between checks.
    this.sleep = 100;

    var time = new Date();
    this.lastTime = time.getTime();
    this.iterate = function(){
        var total = 0;
        var time = new Date();

        // how much time has passed since we slept?
        self.timePassed = self.timePassed + (time.getTime() - self.lastTime);
        self.lastTime = time.getTime();
        for (var t in self.queue){
            if (t <= self.timePassed){
                self.queue[t]();
                delete(self.queue[t]);
            }
            total++;
        }

        if (total == 0){
            return;
        }else{
            setTimeout(self.iterate, self.sleep);
        }
    }
    this.iterate();
}