Question

我正在使用jQuery在列表addClass上循环removeClass和ul函数。

$(function () {
  var $looped = $('li');

  (function _loop(idx) {
    $looped.removeClass('current').eq(idx).addClass('current');
    setTimeout(function () {
      _loop((idx + 1) % $looped.length);
    }, 1000);
  }(0));
});

我想在我使用.mouseenter()悬停元素时停止此循环，让用户自己控制此示例。

JSFiddle Demo View

使用Tobia Pause Plugin很容易实现，但遗憾的是，这只适用于animate()循环。我很欣赏每一个提示或提示！

Answer 1

在此示例中，我展示了如何在hover()事件上暂停和重新启动动画。这也会使动画完全重新开始。

$(function () {
    var $looped = $('li');
    var timeOut;
    var index = 0;
    function _loop(idx) {
        $looped.removeClass('current').eq(idx).addClass('current');
        timeOut = setTimeout(function () {
            index = (idx + 1) % $looped.length;
            _loop(index);
        }, 1000);
    };
    _loop(index);
    $("ul").hover(function () {
        window.clearTimeout(timeOut);
    }, function () {
        _loop(index);
    });
    $("li").hover(function () {
        $("li").removeClass("current");
        $(this).addClass("current");
    }, function () {
        $("li").removeClass("current");
    });
});

有几个关键点。

首先 - 我在跟踪超时功能的匿名函数中分配 功能范围的 变量（非全局）。这允许我在该功能中稍后清除它。不必要地混淆全局命名空间通常是一个坏主意。

第二 - 我将mouseenter()函数更改为hover()函数，该函数接受两个函数作为参数，一个用于鼠标悬停，一个用于鼠标输出事件。

第三 - 我添加了一个名为index的变量，它将在整个函数中跟踪我们的索引。当鼠标不再位于元素上时，这允许循环从其停止的位置恢复。

请参阅 Fiddle HERE

Answer 2

我想你想在mouseout之后再次开始动画，就像你说的那样＃34;在我徘徊时停止＆＃34;。首先，我将你的setTimeout设为全局：

(function _loop(idx) {
    $looped.removeClass('current').eq(idx).addClass('current');
    window.animate = function () {
      _loop((idx + 1) % $looped.length);
    }
    window.timeout = setTimeout(animate, 1000);
}(0));

然后我修改了你的悬停功能，在mouseout输出后再次添加事件：

$("ul").on("mouseenter",function() {
    clearTimeout(timeout);
    $(this).one("mouseout", function() {
      window.timeout = setTimeout(animate, 1000);
    })
})

注意我使用.one()附加了mouseout事件，因为我不想同时添加很多超时。

我更改了您的FIDDLE

悬停时停止循环

2 个答案: