在以下链接中有一个 animated hover effect 的示例.如果我们将鼠标悬停在特定列表中,工具提示将出现和消失,这里没问题。如果我们在特定列表中连续上下移动鼠标,工具提示会出现多次(例如,如果我们移动鼠标十次,工具提示也会出现十次)。
如何解决这个问题(即,如果我们将特定列表悬停几次,工具提示应该只出现一次。
我尝试将脚本更改为(通过添加 stop() 函数)
$(".menu a").hover(function() {
$(this).next("em").stop().animate({opacity: "show", top: "-75"}, "slow");
但是失败了....
最佳答案
使用 .stop(true, true)
停止动画。 Check the working demo 。
$(document).ready(function(){
$(".menu a").hover(function() {
$(this).next("em").stop(true, true).animate({opacity: "show", top: "-75"}, "slow");
}, function() {
$(this).next("em").stop(true, true).animate({opacity: "hide", top: "-85"}, "fast");
});
});
解释:
.stop(true, true)
将移除排队的动画并立即完成当前动画。
.stop( [clearQueue] [, jumpToEnd] )
clearQueueA Boolean indicating whether to remove queued animation as well. Defaults to false.
jumpToEndA Boolean indicating whether to complete the current animation immediately. Defaults to false.
关于javascript - 如何克服 jquery 中的这个问题以获得动画悬停效果?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11949829/