jQuery animate step() 停止动画答案

【问题标题】：jQuery animate step() stops animationjQuery animate step() 停止动画
【发布时间】：2013-06-17 23:20:32
【问题描述】：

我有以下代码：

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/

【问题讨论】：

似乎是work fine。您的问题可能出在访问left 变量值的代码上。
用我正在经历的事情更新了帖子。我希望能够将鼠标悬停在一个元素上，并让它继续移动（只要我悬停，这就是步骤应该更新的地方）。
将hover() 的第一个参数视为mouseenter 的事件处理程序，它没有悬停时间的概念，如果我理解正确的话，使用一些本机API 可能更容易。 jsfiddle.net/RhQrV/2

标签： jquery css jquery-animate

【解决方案1】：

根据您的问题： 但是，它并没有像我想象的那样工作。它不会继续动画，而是在 1 帧后停止。

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

您的动画工作正常，并且 left 变量正在正确且持续地更新。

但是，您的动画被配置为在 100 毫秒的持续时间内仅将元素移动 20 像素。当然，它几乎会立即停止——它完全按照它的指示进行操作。

如果您希望动画连续运行，您可以使用动画的 complete 事件来调用自身。 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
}

【讨论】：

谢谢，正是我想要的。我知道我错过了什么。

【解决方案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/

【讨论】：