javascript - 垂直轮播循环中的 jQuery mouseenter/hover stop 动画

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();
 });