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