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

Question

我需要一个带有网站超链接的工具提示。我编写了下面的代码，似乎工作正常，预计会出现一个问题，一旦我将鼠标悬停在工具提示 block 上，它就会淡出然后淡入。当我以某种方式悬停在它上面时，我需要防止淡出。我尝试使用 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()来清除动画队列。

When .stop() is called on an element, the currently-running animation (if any) is immediately stopped.

1. 您需要删除第二个应用的延迟(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>