jquery mouseover mouseout
jquery mouseover mouseout
提问于 2011-06-01 17:36:45
$('.rollover').mouseover(function(e){
e.stopPropagation();
thisName = $(this).attr('title');
$('li#'+thisName).show(50, 'swing');
});
$('.rollover').mouseout(function(e){
e.stopPropagation();
thisName = $(this).attr('title');
$('li#'+thisName).hide(50, 'swing');
});我有四个类为'rollover‘的图片，所以当鼠标移到每个图片上时，会显示一个与图片标题共享id的列表项，当鼠标离开时，列表项就会隐藏起来。
我的问题是，图像非常接近，如果鼠标进入和离开太快，它只是看起来列表项闪烁。我更喜欢它，这样鼠标输出动画必须在下一个鼠标悬停动画开始之前完成，反之亦然。
我该怎么做呢？
邮箱: JS FIDDLE @ http://jsfiddle.net/callumander/XhpuT/
回答 2
Stack Overflow用户
回答已采纳
发布于 2011-06-01 18:06:30
与其在用户查看新内容之前完成每个动画，不如使用像Hover Intent plugin这样的东西来防止“意外”鼠标悬停？
Stack Overflow用户
发布于 2011-06-01 17:47:24
尝试使用.queue (未经测试)：
$('.rollover').mouseover(function(e){
e.stopPropagation();
thisName = $(this).attr('title');
// start the showing once any currently running
// animations are done
$('li#'+thisName).queue(function() {
$(this).show(50, 'swing');
$(this).dequeue();
});
}).mouseout(function(e){
e.stopPropagation();
thisName = $(this).attr('title');
// start the hiding once any currently running
// animations are done
$('li#'+thisName).queue(function() {
$(this).hide(50, 'swing');
$(this).dequeue();
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6199116
复制相关文章
相似问题
腾讯云开发者
