jquery - 如何阻止jQuery淡入淡出/淡出连续循环？

Question

我希望我的徽标在 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>

请帮忙！谢谢！

Answer 1

您可以使用以下stop()方法：

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

Answer 2

我在以下方面很幸运：

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

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