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

Question

我希望我的 Logo 在 5 秒后不可见，我已经做到了。我还希望当鼠标位于我的标题 div 上时 Logo 再次重新出现，然后如果鼠标移离标题 div 则再次淡出。问题是，将鼠标放在标题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);
});