使用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'));