3

我有以下代码：

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/

4

2 回答 2

1

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

根据您的评论：我希望能够将鼠标悬停在一个元素上，并让它继续移动

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

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

如果您希望动画连续运行，您可以使用动画的完成事件来调用自身。这是一个 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
}
于 2013-06-17T23:49:02.063 回答
0

问题是您正在进行无限循环，而浏览器不喜欢它。看，当我运行你的代码时，我得到了这个错误：

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/

于 2013-06-17T23:47:03.637 回答