Question

我有一个小的悬停脚本，它的工作原理如下：当我将鼠标悬停在某个链接上时，它会淡化相关的div。

现在，我尝试创建第二个链接并将其配置为显示第二个div并且我已成功，但是，当我将它们快速一个接一个地显示时，它会显示 BOTH褪色的Divs 并保持一段时间（显示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

Answer 2

这可以防止同时显示2个div

＆＃13;

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

＆＃13;

#bank {display:none;}

＆＃13;

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

＆＃13;

Answer 3

如果已经运行，您可以使用标志返回功能：

SELECT user, COUNT(*) cars 
FROM table 
GROUP BY user 
ORDER BY cars desc
LIMIT 1;

fiddle

Answer 4

这是因为如果将鼠标悬停在动画上而另一个动画正在进行中，则它不会停止当前动画。您可以通过对每个调用使用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');
    });
});

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

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

尝试就是一个。你可以给十进制数来修正fadeIn函数的速度

Answer 6

试试这个：

＆＃13;

<select id="changeprocess" name="changeprocess" required>
    <option value="" hidden="hidden">Choose Process</option>
    {{range .Process}}
    <option value="{{.}}">{{.}}</option>
    {{end}} 
</select>

＆＃13;

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

＆＃13;

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

＆＃13;

Fiddle Link

希望这有帮助。

Answer 7

试试这个

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


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

如何一次显示一个悬停？

7 个答案: