javascript - 如何保持一次显示一个悬停？

Question

我有一个小的悬停脚本，它是这样工作的:当我将鼠标悬停在链接上时，相关的 div 会淡出。

现在，我尝试创建第二个链接并将其配置为显示第二个 div，我已经成功了，但是，当我将它们悬停在 fast 上时，它一个接一个地显示 BOTH褪色的 Div 并停留一段时间(显示 2 个 div 而不是 1 个)，直到第一个 div 返回。

我想在悬停时一次只显示一个 div，即使我在链接之间快速悬停也是如此。

代码如下:

<script type="text/javascript" src="https://code.jquery.com/jquery-1.8.3.js"></script>

<style>
#bank {display:none;}
</style>

<div><a href="#" id="btn">Show bank div and hide fancy div</a></div>
<div><a href="#" id="btn-bk">Show back and hid fancy div</a></div><br>
<div id="bank">Bank Div</div>
<div id="fancy">Fancy Div</div>

<script type="text/javascript">
//<![CDATA[

$(window).load(function(){
$('#btn').hover(function(e){    
    $('#fancy').fadeOut('slow', function(){
        $('#bank').fadeIn('slow');
    });
});


$('#btn-bk').hover(function(e){    
    $('#bank').fadeOut('slow', function(){
        $('#fancy').fadeIn('slow');
    });
});
/]]> 
</script>

查看实际效果:https://jsfiddle.net/rami7250/1jLtxdr7/

Answer 1

$('#btn').hover(function(e){    
    $('#fancy').stop(true, true).fadeOut('slow', function(){
        //--------^ Add 'stop(true, true)'
        $('#bank').fadeIn('slow');
    });
}); 
$('#btn-bk').hover(function(e){    
    $('#bank').stop(true, true).fadeOut('slow', function(){
        $('#fancy').fadeIn('slow');
    });
});

通过添加 stop(true, true)，您可以立即开始当前动画，并且您之前的动画将从队列中移除。 Read More

Example Fiddle