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

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

1 个答案: