4

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

但我的代码有问题

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

笔记：

  • 我不想失去动画效果

  • 我不想使用任何插件

4

2 回答 2

2

那是因为错误的排队。

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

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

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

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

于 2013-05-09T15:48:37.373 回答
1

选择器.imgSpan:hover不正确。

由于您没有提到 HTML，因此假设（通过问题中提到的选择器， $(".imgSpan:hover .img")即 ie 的子级.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);
});

演示在这里

于 2013-05-09T15:55:43.453 回答