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

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/