jquery工具提示延迟显示

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

但我有一些问题，我的代码

我不想过多显示，有提示小于500毫秒悬停时间，但我因为fadeTo（）动画效果的闪烁效果

这意味着当我赶紧悬停在.imgSpan然后unhover鼠标小于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' />

笔记：

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

来源

2013-05-09 Mohammad Masoudian

jQuery并不像伪选择器那样定位：悬停！ – adeneo 2013-05-09 15:46:53

你可以添加你使用的HTML吗？ – Justin 2013-05-09 15:48:53

问题编辑和HTML代码添加 – 2013-05-09 15:56:31

这是因为错误的排队。

要纠正的是，你可以写在CSS行这样的：

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

这将清除在选择每一个动画，然后更改CSS。

林不知道，但我认为你可以删除第二个true停止。你只需要尝试一下！

来源

2013-05-09 15:48:37

这工作谢谢你你能投票给我吗？：d – 2013-05-09 16:01:36

选择器.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

来源

2013-05-09 15:55:43 SachinGutte

jquery工具提示延迟显示

回答

相关问题