jQuery在动画之前获取动画步骤，可能吗？

Question

我需要获取动画之前，jquery将循环进行的步骤列表。

例如，如果我有：

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

我真正想要的是在调用动画之前获得一个“左”位置数组。

喜欢：

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

请注意，有一种缓和因素需要考虑。 我看过一些使用动画来计算数字的时髦用法，这是我最初的想法，但是所有这些都意味着运行动画，而我做不到。

有人对如何执行此操作有任何想法吗？

Answer 1

创建自己的动画功能？

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;
};

其次是

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

Answer 2

您可以编写一个函数来处理positions数组。 动画结束后，将使用数组和保存下一个索引的变量再次调用animation（）函数。

该函数可以如下所示：

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

}

动画（位置）；