垂直轮播循环中的jQuery mouseenter / hover停止动画

Question

所以我构建了一个非常简单的自动垂直轮播，它循环遍历项目列表，但是现在我需要在鼠标进入 div 时停止循环，我尝试了 stop() 但没有奏效。

我的 HTML 看起来像这样：

<div class="relative pegascontainer">
<ul class='pegas'>
    <li>
        <div class="pega">
            ...
        </div>
    </li>
    <li>
        <div class="pega">
            ...
        </div>
    </li>
    <li>
        <div class="pega">
            ...
        </div>
    </li>
    <li>
        <div class="pega">
            ...
        </div>
    </li>
</ul>

还有我的JS（190只是容器的高度）：

var listi = $(".pegas").children("li"),
    listiNum = (listi.length)/2,
    listiMax = (listiNum*190)-190;

function pegaLoop(){
    for (var i=0,len=listiNum; i<len; i++){

        $(".pegas").animate({
            'margin-top': -190*i
        }, 500, function(){
            if($(this).css("margin-top") == "-"+listiMax+"px"){
                $(this).animate({'margin-top': 0});
                pegaLoop();
            }
        }).delay(1000);

    }

};

pegaLoop();

我尝试过这样的事情，但没有奏效：

$(".pegas").hover(function() { 
        $('.pegas').stop();
    }, function() {
        pegaLoop();
});

提前致谢。

Answer 1

JQuery 不擅长这个开箱即用。您可能想尝试一个小的JQuery Pause Plugin。

我知道这会让你写这样的东西：

function pegaLoop()
{
   for (var i=0,len=listiNum; i<len; i++) // probably better as $("pegas li").each(...)
   {
       $(".pegas").animate({'margin-top': -190*i}, 500).delay(1000);
   }
   $(this).animate({'margin-top': 0}, pegaLoop);
}

请注意，所有这些都是设置一个动画队列，其中包含最终重复到顶部的延迟，然后再次进入队列中的所有动画。我们不想将pegaLoop 放在每个 回调中，而只是放在最后一个。

暂停（使用插件）将是：

$(".pegas").hover(function()
 {
     $('.pegas').pause();
 },
 function()
 {
    $('.pegas').resume();
 });