我已经编写了一个快速的 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 中的元素之一时,是否可以暂停此效果?我做了几次尝试都没有成功。
如有任何帮助,我们将不胜感激!
最佳答案
这应该有效:
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'));
关于javascript - 使用 jQuery 淡入/淡出并在鼠标悬停时暂停,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5806957/