使用jQuery淡入/淡出并暂停鼠标悬停 [英] Fade in/out and pause on mouse over with jQuery

问题描述

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

I've wrote a quick jQuery snippet to automatically fades in/out a set of div's at a pre-set interval. My code looks like this:

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

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中的一个元素时，是否可以暂停此效果？我做了几次没有运气的尝试。

Is it possible to have this effect pause when a user mouseover's one of the elements within the #container? I've made several attempts with no luck.

任何帮助都会非常感激！

Any help would be much appreciated!

推荐答案

这应该有效：

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

这篇关于使用jQuery淡入/淡出并暂停鼠标悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！