Firefox中的jquery悬停错误？答案

【问题标题】：jquery hover bug in firefox?Firefox中的jquery悬停错误？
【发布时间】：2011-11-16 21:22:56
【问题描述】：

我用 .hover() 和 animate() 创建了一个缩略图菜单，其中包含一些带有 hover() 不透明度效果的图像。

我只在使用 Firefox 8.0（mac 或 pc）时遇到问题，所有其他浏览器都经过测试并且工作正常。

发生的情况是，当我将鼠标悬停在菜单上时，它应该会出现，而当我将鼠标悬停在菜单上时，它应该再次隐藏。如果我将鼠标悬停在缩略图所在的屏幕左侧，则 hover() 进程会卡住并永远循环。如果我将鼠标悬停在没有缩略图的右侧，它可以正常工作。

你可以在这里看到它以了解错误循环 -> 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 中？有什么办法解决吗？

提前谢谢你。

【问题讨论】：

标签： jquery firefox hover jquery-animate

【解决方案1】：

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

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

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

【讨论】：

我也尝试了 .stop 方法，但它在第一次动画中再次出现错误，因此它使页面中的菜单越来越高。是的，我知道它在拇指上的错误，所以想到的唯一方法是将它们隐藏并在栏的动画过程之后显示它们。但老实说，客户会对此感到抓狂。

【解决方案2】：

好吧，我使用 hoverIntent 插件而不是默认的 .hover() 修复了它，使用 hoverIntent cherne.net/brian/resources/jquery.hoverIntent.html 有一点延迟，它似乎绕过了错误的循环，所以它按预期工作到。

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

【讨论】：