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

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

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

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

});

Answer 2

您可以使用 .stop（）来清除动画队列。

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

您需要删除第二个中应用的延迟（1000） 函数传递给 hover（）方法。

还要确保添加 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>

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

2 个答案: