如何基于阵列播放和停止动画？

Question

我希望能够创建一个可以播放和停止（重置）的动画。

这是我到目前为止：

function animateObject(amountArray) {
  // Sample data
  amountArray = ["0", "1", "3", "2", "0"];
  duration = 500;

  // Looping through each value and animating the object 
  for(i=0; i<amountArray.length; i++) {

    $('#object').animate({
      top: amountArray[i]
    },duration);

  } // endloop

}

这可以准确地为对象设置动画，但是调用$('#object').stop(); 任何地方似乎都没有停止动画。

我认为这是因为循环已经构建完毕，并且在执行之后没有任何东西可以阻止它。

Answer 1

尝试调用.stop(true) 。 这应该清除排队的动画。

Answer 2

为什么不使用setInterval控制启动和停止？

http://jsfiddle.net/YdZrZ/12/