显示延迟的jquery工具提示答案

【问题标题】：jquery tooltip with delay on show显示延迟的jquery工具提示
【发布时间】：2013-05-09 15:43:18
【问题描述】：

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

但我的代码有问题

我不想显示悬停时间少于 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' />

注释：

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

【问题讨论】：

jQuery 不针对伪选择器，例如 :hover !
能否添加您正在使用的 HTML？
已编辑问题并添加了 HTML 代码

标签： jquery tooltip

【解决方案1】：

那是因为排队错误。

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

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

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

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

【讨论】：

【解决方案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

【讨论】：