取消工具提示悬停的淡出效果

Question

我需要一个包含网站超链接的工具提示。我写了下面的代码，似乎它工作正常，预计会出现一个问题，一旦我将工具提示块悬停，它就会淡出然后淡入。当我以某种方式对其进行操作时，我需要防止淡出。我尝试使用 stop() 方法，但它不起作用，很可能是我做错了什么:) 你能帮忙吗？谢谢。

HTML

<div id="hover">
    <div class="tooltip">

        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>

    </div>
</div>

CSS

body{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
#hover {
    position: relative;
    width:50px;
    height:50px;
    background: green;
}
.tooltip {
    position: relative;
    width: 45px;
    top: 80px;
    height: 20px;
    border: 1px solid black;
     padding: 5px;
}
a{
    display: inline-block;
    margin-top: 5px;
    height: 10px;
    width: 10px;
    border: 1px solid black;
    background: red;
}

jQuery

$(document).ready(function(){
    $(".tooltip").hide();

    $("#hover").hover(function(){
        $(this).find(".tooltip").fadeIn();
        },function(){
        $(this).find(".tooltip").delay(1000).fadeOut();
    });
});

演示在这里http://jsfiddle.net/8gC3D/2904/

Answer 1

您可以使用 .stop() 来清除动画队列。

当在一个元素上调用 .stop() 时，当前正在运行的动画 （如果有的话）立即停止。

1. 需要去掉第二次应用的delay(1000) 函数传递给 hover() 方法。

2. 还要确保添加 stop() 方法来停止任何当前 如果您快速悬停并清除队列，则会出现动画。

   $("#hover").hover(function(){
       $(this).find(".tooltip").stop().fadeIn();
       },function(){
       $(this).find(".tooltip").stop().fadeOut();
   });
   

确保将其全部包装在文档就绪函数中。

JSFIDDLE： http://jsfiddle.net/a_incarnati/8gC3D/2905/

$(document).ready(function(){
    $(".tooltip").hide();
    
    $("#hover").hover(function(){
        $(this).find(".tooltip").stop().fadeIn();
        },function(){
        $(this).find(".tooltip").stop().fadeOut();
    });
});

body{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
#hover {
    position: relative;
    width:50px;
    height:50px;
    background: green;
}
.tooltip {
    position: relative;
    width: 45px;
    top: 80px;
    height: 20px;
    border: 1px solid black;
     padding: 5px;
}
a{
    display: inline-block;
    margin-top: 5px;
    height: 10px;
    width: 10px;
	border: 1px solid black;
    background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="hover">
    <div class="tooltip">
		
        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>
		
    </div>
</div>

Answer 2

可能问题出在 jQuery 的动画队列中尝试使用.stop method 清除之前的队列，如下所示：

$(document).ready(function(){ $(".tooltip").hide();

$("#hover").hover(function(){
    $(this).find(".tooltip").stop().fadeIn();
    },function(){
    $(this).find(".tooltip").stop().delay(1000).fadeOut();
});

});

1. https://api.jquery.com/stop/
2. https://css-tricks.com/examples/jQueryStop/