使用jQuery淡入/淡出并暂停鼠标hover

我写了一个快速的jQuery片段，以预先设定的间隔自动淡入/淡出一组div。 我的代码如下所示：

HTML

 
 
Lorem ipsum dolor sit amet.
 
 
 
Lorem ipsum dolor sit amet.
 
 
 
Lorem ipsum dolor sit amet.
 
  

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

当用户将鼠标hover在#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'));