jQuery get animation steps before animating, possible?

Question

I need to get a list of steps which jquery will be cycling through BEFORE animating.

For instance if I have:

$("div#whatever").animate({"left":500}, {
    duration: 1000,
    easing: 'easeOutQuad'
});

What I would really like is to get an array of "left" positions BEFORE calling the animation.

like:

var positions = ['0','255','350','390','420','440','455'..... '500'];

Note that there's easing to take into account. I've seen some funky uses of animate to count numbers and that was my initial thought however all of these would mean running the animation which I can't do.

Anyone have any thoughts as to how to do this?

Answer 1

Create your own animate function?

jQuery.fn.animateLeft = function(prop1, prop2) {
  var left = new Array();

  //add left
  this.each(function() {
    if(this.style && this.style.left) {
      left.push(this.style.left);
    }
    else {
      left.push(0);
    }
  }

  //animate
  this.animate(prop1, prop2);
  return left;
};

followed by

var positions = $("div#whatever").animateLeft ({"left":500}, {
    duration: 1000,
    easing: 'easeOutQuad'
});

Answer 2

You can write a function to process the positions array. When the animation finished, the function animation() will be called again with the array and a varible who saves the next index.

The function can look like this:

  var positions = ['0','255','350','390','420','440','500'];
  function animate(positions,i){

  if(typeof i === 'undefined'){
   i = 0; 
  }

  if(i < positions.length){


   $("#hello").animate({"left":positions[i]}, {
    duration: 1000,
    complete: function(){
     i++;
    animate(positions,i);
   }
 }); 
}

}

animate(positions);