使用jQuery淡入/淡出和暫停鼠標

Question

我已經編寫了一個快速jQuery代碼片段，以自動淡入/淡出一組div，並以預設的時間間隔。我的代碼如下所示：

HTML

<div id="container"> 
<div> 
     <p>Lorem ipsum dolor sit amet.</p> 
</div> 
<div> 
     <p>Lorem ipsum dolor sit amet.</p> 
</div> 
<div> 
     <p>Lorem ipsum dolor sit amet.</p> 
</div> 
</div> 

JAVASCRIPT

function InOut(elem) 
{ 
elem.delay() 
.fadeIn(600) 
.delay(5000) 
.fadeOut(600, 
    function(){ 
     if(elem.next().length > 0) 
      { InOut(elem.next()); } 
     else 
      { InOut(elem.siblings(':first')); } 

     } 
    ); 
} 

$('#container div').hide(); 
InOut($('#container div:first')); 

是否有可能有這種效果停頓當用戶鼠標懸停的在#container的內部的要素之一？我已經做了幾次嘗試，但都沒有運氣。

任何幫助將不勝感激！

Answer 1

這應該工作：

function InOut(elem) 
{ 
elem.delay() 
.fadeIn(600) 
.delay(500) 
.fadeOut(600, 
    function(){ 
     if(elem.next().length > 0) 
      { InOut(elem.next()); } 
     else 
      { InOut(elem.siblings(':first')); } 

     } 
    ) 
    .mouseover(function(){ 
     $(this).stop(true, false); 
    }) 
    .mouseout(function(){ 
     InOut($(this)); 
    }); 
} 

$('#container div').hide(); 
InOut($('#container div:first'));