1

だから私はアイテムのリストをループする非常に単純な自動垂直カルーセルを構築しましたが、マウスが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();
});

前もって感謝します。

4

1 に答える 1

0

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();
 });
于 2013-02-05T21:11:36.423 に答える