Question

我希望我的徽标在5秒后看不见，这是我能够做到的。当鼠标移到我的标题div上时，我还希望徽标再次出现，如果鼠标离开标题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);
});

Answer 2

我好运以下：

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

而不是在标题标记中挂起处理程序。

如何阻止jQuery逐渐淡出/淡出循环？

2 个答案: