延迟显示的jQuery提示框

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' />

注：

• 我不想失去动画效果

• 我不想使用任何插件

- Mohammad Masoudian

---

jQuery不支持像:hover这样的伪选择器！ - adeneo

你能附上你正在使用的HTML吗？ - Justin

问题已编辑并添加了HTML代码。 - Mohammad Masoudian

Answer 1

这是由于错误的排队导致的。

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

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

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

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

- Karl-André Gagnon

Answer 2

选择器 .imgSpan:hover 是不正确的。

由于您没有提到 HTML，假设（根据问题中提到的选择器 $(".imgSpan:hover .img") 即 .imgSpan 的子元素），

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

这是正确的 JavaScript 代码 -

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

这里查看演示

- SachinGutte