如何阻止jQuery淡入淡出/淡出连续循环？答案

【问题标题】：How to stop jQuery fade in fade out/fadeto looping continuously?如何阻止jQuery淡入淡出/淡出连续循环？
【发布时间】：2012-06-07 12:36:53
【问题描述】：

我希望我的徽标在 5 秒后不可见，我已经做到了。当鼠标移到我的标题 div 上时，我还希望徽标再次出现，然后如果鼠标移出标题 div，则再次淡出。问题是，将鼠标放在header div上然后移开后，它会连续淡入淡出3次，几乎就像一个闪烁的效果。我怎样才能阻止这种情况发生？

我尝试将我的脚本放在正文和头部中，看看如果没有成功会有什么不同。我还尝试将函数放在单独的脚本标签中...

<script type="text/javascript">
    $(document).ready(function () {
        $('#logo').delay(5000).fadeTo( 5000, 0 );
    });
</script>

<script type="text/javascript">
function showLogo()
{
    $('#logo').fadeTo( 2500, 1 );
}
</script>

<script type="text/javascript">
function hideLogo() {
    $('#logo').delay(2500).fadeTo( 2500, 0 );
}
</script>

这是 HTML：

<header id="header" onmouseover="showLogo()" onmouseout="hideLogo()">
<div id="logo">
<img src="images/logo.png">
</div>

请帮忙！谢谢！

【问题讨论】：

您好，感谢您的建议，我试过了，但现在徽标没有重新出现在鼠标悬停上。
你好，你试过没有showogo()和hideLogo()函数吗？

标签： jquery fadein fadeout fadeto

【解决方案1】：

您可以使用stop() 方法：

$('#header').hover(function(){
    $('#logo').stop().fadeToggle(2500);
});

【讨论】：

完美运行！太感谢了，太郁闷了！！！我非常感谢您的帮助:)

【解决方案2】：

我在以下方面很幸运：

$(document).ready(function () {
    $('#logo').delay(5000).fadeTo( 5000, 0 );
    $('#header').mouseenter(function(e){showLogo();});
    $('#header').mouseleave(function(e){hideLogo();});
});

而不是将处理程序挂在标题标签中。

【讨论】：