jQuery цепочечная анимация без плагина

Question

Раньше с jQuery я мог делать цепочечную анимацию с задержкой, например:

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

Теперь, поскольку обновление до v1.6.1 вместо того, чтобы делать то, что оно делало ранее, теперь переходит к последней анимации. Игнорируя предыдущие заявления. Я знаю, что могу сделать неполный обратный вызов для каждой анимации, но это просто грязно:

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

Кто-нибудь знает, как я могу сделать это простым, чистым способом?

Answer 1

Редактировать: добавлено Скрипка для игры с

Я написал этот кусок кода некоторое время назад, может быть, он полезен для вас? (извините за грязный отступ)

/**
 * 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();
}

Answer 2

Вот второй способ по запросу.Я отправляю это в другом ответе, потому что это более сложно, и возможно менее красиво.Чтобы поиграть с ним, см .: http://jsfiddle.net/LMptt/1/

Использование: используйте строку с + или -, чтобы указать относительную метку времениПорядок имеет значение для относительных меток времени (относительно предыдущего действия, которое есть).Используйте «+0» или «-0» для той же отметки времени, что и предыдущая.Абсолютные метки времени (целые числа) можно поместить в любое место списка.

$(document).ready(function ()
{
    queue([
        [2000, function () {  $('.two').slideUp(); }],
        ['-1000', function () {  $('.one').slideUp(); }],
        [3000, function () {  $('.three').slideUp(); }],
        ['+1000', function () {  $('.four').slideUp(); }]
    ]);

});

/**
 * Queue.js
 *
 * @author Arend van Waart
 *
 *  This will allow for events to be queued by (relative) timestamp
 */

 function queue (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 i in self.queue) {
            if (self.queue[i][0] <= self.timePassed){
                self.queue[i][1]();
                self.queue.splice(i,1);
            } else {
                // added sorting now, so we don't have to evaluate the rest.
                break;
            }
        }

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


    this.parseRelative = function ()
    {
        var absoluteQueue = [];
        var lastAbsolute = 0;
        for (var i in queue)
        {
           var absolute;
           var firstChar = String(queue[i][0]).charAt(0);
           if (firstChar == "+" ||  firstChar == "-")
           {
              absolute = lastAbsolute + parseInt(queue[i][0]);
           } else {
              absolute = parseInt(queue[i][0]);
           }
           lastAbsolute = absolute;
           absoluteQueue.push([absolute, queue[i][1]]);
        }
        this.queue = absoluteQueue;
    }
    this.sort = function (a,b)
    {
        return a[0] - b[0];
    }

    this.parseRelative();
    this.queue.sort(this.sort);
    this.iterate();
}