Question

我有以下代码：

left = $('.academy-container').css('marginLeft');
function loop_forward(){
    $('.academy-container').stop().animate(
      {
        marginLeft:'-=20'
      }, 
      { 
        duration: 100, 
        step: function(now, fx) { 
          left = fx.pos; 
        }
      },
      loop_forward
      );
  }

  $('.carousel-next').hover(function() {
      loop_forward()
    }, function() {
      stop();
    })
  }

我正在尝试使用step函数通过每步更新“left”变量来跟踪向左移动的边距。但是，我认为这样做并不是很有效。它不是继续动画，而是在1帧后停止。

我希望它能够在更新变量时不断循环播放动画。我找不到这个代码有什么问题，所以任何帮助都将不胜感激。：）

感谢。

编辑：这是我遇到的问题的一个小提琴： http://jsfiddle.net/RhQrV/1/

Answer 1

来自你的问题：但是，我认为这样做并不是很有效。它不是继续动画，而是在1帧后停止。

来自您的评论：我希望能够将鼠标悬停在某个元素上并让它继续移动

您的动画工作正常，左变量正在不断更新。

但是，您的动画配置为在100毫秒的持续时间内仅移动元素20个像素。当然，它几乎会立即停止 - 它正如它所说的那样完成。

如果您希望动画连续运行，可以使用动画的完整事件来调用自身。 Here's a jsFiddle。我在这里修改了mouseout函数来结束动画：

$('.hover').hover(function() {
    loop_forward();
}, function() {
    $('.academy-container').stop(); // Stops the element's animation
});

动画的配置现在也是这样的：

{
    easing: 'linear', // Ensure a smooth animation
    step: function (now, fx) {
        left = fx.pos;
        console.log(left);
    },
    complete: loop_forward // Animation now loops itself
}

Answer 2

问题在于你正在进行无限循环而浏览器不喜欢它。看，当我运行代码时，我收到此错误：

Uncaught RangeError: Maximum call stack size exceeded

当你进行无限循环时，这就是错误。要求很多CPU。您需要使用Timer来进行该循环：

var timer;

$('.hover').hover(function() {
    timer = setInterval(loop_forward, 100);
}, function() {
    clearInterval(timer)
});

小提琴：http://jsfiddle.net/RhQrV/3/

jQuery animate step（）停止动画

2 个答案: