jQuery获得动画步骤之前，动画，可能的

jQuery get animation steps before animating, possible?

本文关键字：动画 jQuery      更新时间：2023-09-26

我需要得到一个步骤的列表，jquery将循环通过动画之前。

例如:

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

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

: 

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

请注意，这里需要考虑缓和。我看到过一些用动画来计数的古怪用法，这是我最初的想法，但是所有这些都意味着要运行动画，而这是我做不到的。

谁有什么想法，如何做到这一点?

创建自己的动画函数?

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

您可以编写一个函数来处理位置数组。当动画结束时，函数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);
   }
 }); 
}

}

动画(头寸);

相关文章：