如何每次保持一个鼠标悬停?

I have a small hover script and it works like that: When i hover on a link it is fade the relevant div.

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

Now, i tried to create a second link and configure it to display the second div and i have succeeded, but, when i hover them fast one-after-one it display BOTH faded Divs and stay stuck a while (with 2 divs display instead of 1) until the first div returns.

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

I want to display only one div at a time when i hover even if i hover fast between links.

我想在鼠标悬停的时候只显示一个div，即使我在链接之间徘徊。

Here is the code:

这是代码:

<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>

See it in action: https://jsfiddle.net/rami7250/1jLtxdr7/

请参阅操作:https://jsfiddle.net/rami7250/1jLtxdr7/。

7 个解决方案

#1

this prevent 2 div shown at the same time

这样可以防止同时显示两个div。

$('#btn').hover(function(e){
    $('#fancy').stop().hide();
    $('#bank').fadeIn('slow');
}); 
$('#btn-bk').hover(function(e){    
    $('#bank').stop().hide();
    $('#fancy').fadeIn('slow');    
});

#bank {display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

#2

$('#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');
    });
});

By adding stop(true, true) you can start current animation immediately and your previous animations will be removed from queue. Read More

通过添加stop(true, true)，您可以立即启动当前动画，之前的动画将从队列中删除。阅读更多

Example Fiddle

例如小提琴

#3

you can use a flag to return function if it's already running:

如果已经运行了，可以使用标志返回函数:

var flag;
$('#btn').hover(function(e){
if (flag)return;
flag = true;
    $('#fancy').fadeOut('slow', function(){
        $('#bank').fadeIn('slow');
        flag = false;
    });
});


$('#btn-bk').hover(function(e){  
if (flag)return;
flag = true;
    $('#bank').fadeOut('slow', function(){
        $('#fancy').fadeIn('slow');
         flag = false;
    });
});

fiddle

小提琴

#4

This is because if you hover over an animation while another is in progress it doesn't stop the current animation. You can force this to happen by using the stop() function for each call.

这是因为如果您在一个动画上悬停，而另一个动画正在进行中，它不会停止当前动画。您可以通过对每个调用使用stop()函数来强制执行此操作。

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


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

See my fiddle: https://jsfiddle.net/1jLtxdr7/2/

看到我的小提琴:https://jsfiddle.net/1jLtxdr7/2/

#5

<html>
<head>

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

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

<body>
<div><a href="#" id="btn">Show bank div and hide fancy div</a></div>
<BR>
<BR>
<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">


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


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

Try is one . you can give decimal numbers to fix speed of fadeIn function

试就是其中之一。你可以给十进制数来确定fadeIn函数的速度

#6

Try This one

试试这个

$('#btn').hover(
    function(e){    
        $('#bank').show();
  },
  function(e){
    $('#fancy, #bank').hide();
  }
);


$('#btn-bk').hover(
    function(e){    
        $('#fancy').show();
  },
  function(e){
    $('#fancy, #bank').hide()
  }
);

#7

Try this:

试试这个:

$('.toggle_text').hover(function(e){ 
    var text = $(this).attr("data-info");
    var text_to_show = $("#"+text).html();    
    
    $('#show_div').fadeOut('slow', function(){
      $('#show_div').html(text_to_show).fadeIn('slow');
    });
});

#bank {display:none;}
.hide {display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div><a href="#" id="btn" class="toggle_text" data-info="show_fancy">Show bank div and hide fancy div</a></div>
<div><a href="#" id="btn-bk" class="toggle_text" data-info="show_bank">Show back and hid fancy div</a></div><br>
<div id="show_bank" class="hide">Bank Div</div>
<div id="show_fancy" class="hide">Fancy Div</div>
<div id="show_div"></div>

Fiddle Link

小提琴的链接

Hope this helps.

希望这个有帮助。

#1