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

您可以编写一个函数来处理位置数组。当动画结束时，将使用数组和保存下一个索引的varible再次调用函数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);
   }
 }); 
}

}

动画（位置）;

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

2 个答案: