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' />
笔记:
我不想失去动画效果
我不希望使用任何插件
答
这是因为错误的排队。
要纠正的是,你可以写在CSS行这样的:
$(".img").stop(true, true).css("display", "none");
这将清除在选择每一个动画,然后更改CSS。
林不知道,但我认为你可以删除第二个true
停止。你只需要尝试一下!
+0
这工作谢谢你 你能投票给我吗? :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);
});
jQuery并不像伪选择器那样定位:悬停! – adeneo 2013-05-09 15:46:53
你可以添加你使用的HTML吗? – Justin 2013-05-09 15:48:53
问题编辑和HTML代码添加 – 2013-05-09 15:56:31