Question

我使用.hover（）和animate（）创建了一个缩略图菜单，其中包含一些具有悬停（）不透明效果的图像。

我只遇到Firefox 8.0（mac或pc）的问题，所有其他浏览器都经过测试并且运行正常。

当我将鼠标悬停在菜单上时，它应该出现，当我将鼠标悬停时，它应该再次隐藏。如果我将鼠标悬停在屏幕左侧的缩略图上，则悬停（）过程会卡住并永远循环。如果我将鼠标悬停在没有缩略图的右侧，则可以正常工作。

你可以在这里看到它来理解错误循环 - ＆gt; http://www.econtentsys.gr/affiliate/xenosk/temp/amigdalos/wedding.php

我的代码：

$('#bottomthumbsmenu').hover(function() {
$('#bottomthumbsmenu').animate({"bottom": "+=80px"}, "slow");
}, function() {
$('#bottomthumbsmenu').animate({"bottom": "-=80px"}, "slow");
});

任何想法为什么它只会卡在Firefox中？它有什么办法吗？

提前谢谢。

Answer 1

您是否尝试过使用jQuery的stop()方法来阻止动画队列？类似的东西：

$('#bottomthumbsmenu').hover(function() {
    $(this).stop().animate({"bottom": "+=80px"}, "slow");
}, function() {
    $(this).stop().animate({"bottom": "-=80px"}, "slow");
});

另外，也许你已经注意到了，但只有当你将鼠标悬停在拇指上时动画才会进入循环。如果你把光标放在屏幕的右侧，没有拇指，一切都很好。你可能想看看这个。

Answer 2

我使用hoverIntent插件而不是默认的.hover（）使用hoverIntent cherne.net/brian/resources/jquery.hoverIntent.html使用hoverIntent插件修复它，但是它有一点点延迟似乎绕过了错误的循环所以它可以正常工作到。

$("#bottomthumbsmenu").hoverIntent({
over: makeTall, 
timeout: 500, 
out: makeShort
});
function makeTall(){  $(this).animate({"bottom": "+=80px"}, "slow");}
function makeShort(){ $(this).animate({"bottom": "-=80px"}, "slow");}

firefox中的jquery悬停bug？

2 个答案: