JQuery chained animation without plugin

Question

Earlier in jQuery, I could make a chain of animation with a delay between such words:

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

Now, starting with the upgrade to version 1.6, instead of doing what he did before, he now moves on to the last animation. Ignoring previous statements. I know I can make an incomplete callback for each animation, but this is just messy:

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

Does anyone know how I can do this in a simple way?

Answer 1

Here is the second method on request. I am posting it in a different answer because it is more complex and possibly less beautiful. To play with him, see: http://jsfiddle.net/LMptt/1/

Usage: use the line with + or - to indicate a relative timestamp. The order matters for relative timestamps (relative to the previous action). Use "+0" or "-0" for the same timestamp as the previous one. Absolute timestamps (integers) can be placed anywhere in the list.

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

Answer 2

Edit: Added Fiddle so you can play with

I wrote this piece of code a while ago, maybe it is useful to you? (sorry for the erratic indentation)

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