jQuery mouseenter /懸停停止動畫在垂直旋轉木馬循環

Question

因此，我已經建立了一個非常簡單的自動垂直旋轉木馬，通過項目列表循環，但現在我需要停止循環時，鼠標進入div，我已經嘗試停止（）但沒有工作。

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