Question

我写了一个非常简单的工具提示脚本，预先显示延迟。

但我的代码存在问题

我不想太显示悬停时间小于500毫秒的工具提示但由于fadeTo（）动画效果我有闪烁效果

这意味着当我将鼠标悬停在.imgSpan上然后快速取消鼠标时间小于500毫秒时，.img标记将在500毫秒后显示并快速隐藏

这是我的代码

$(document).ready(function ()
{
    $('.img').css('display','none');
});
$('.imgSpan').hover(
function(){
    $(".imgSpan:hover .img").delay(500).fadeTo(500, 1);
},
function(){
    $(".img").css("display", "none");
    $(".img").fadeTo(0, 0);
}
);

HTML代码：

<span class='imgSpan'>
<a>
<img src='/images/image.png' class='middle' />
</a>
<img class='img' src='image_path' alt='image' />

注释：

我不想失去动画效果
我不想使用任何插件

Answer 1

那是因为排队错误。

要纠正这个问题，您可以像这样编写CSS行：

$(".img").stop(true, true).css("display", "none");

这将清除选择器上的每个动画，然后更改CSS。

我不确定，但我认为您可以在停止时移除第二个true。你只需要尝试一下！

Answer 2

选择器.imgSpan:hover不正确。

由于您没有提及HTML，假设（通过提到的选择器$(".imgSpan:hover .img")即.imgSpan的孩子），

<div class="imgSpan">Hover me
<div class="img">Some</div>
</div>

这里有正确的js -

$('.img').css('display','none');
$('.imgSpan').hover(function(){
    $(this).find(".img").delay(1000).fadeTo(500, 1);
},function(){
    $(".img").css("display", "none");
    $(".img").fadeTo(0, 0);
});

Demo here

jquery工具提示延迟显示

2 个答案: