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