jQuery animate 在 Firefox 中无法正常工作答案

【问题标题】：jQuery animate doesn't work correctly in firefoxjQuery animate 在 Firefox 中无法正常工作
【发布时间】：2013-07-15 02:04:55
【问题描述】：

 jQuery(function() {
            jQuery('#rightbar').bind('mouseenter',function(){
                  jQuery(this).stop().animate({right: 0}, {duration:600});
            });
            jQuery('#rightbar').bind('mouseleave',function(){
                  jQuery(this).stop().animate({right: '-150px'}, {duration:600});
            });
        });

虽然我在我的网站上使用此功能，但它在除 Firefox（最新）之外的所有其他浏览器上都能正常工作。

当我将鼠标悬停在 div #rightbar 上时，它会像我的脚本一样向左移动而不是向右移动。我检查了 Chrome 和 frefox：

在 Chrome 上，当鼠标悬停时，右属性从：-150 -> 0

但是在firefox上，当鼠标悬停时，右属性改变-150 -> -170 ...等..

不知道为什么，可能是firefox的bug（？）。

期待您的帮助。

谢谢！

P/s：您可以在这里查看：http://goo.gl/SChFo

【问题讨论】：

标签： jquery firefox jquery-animate

【解决方案1】：

我做了一些研究，看起来这是 FireFox 中的一个错误：

https://bugzilla.mozilla.org/show_bug.cgi?id=844178

如果你使用min-width 而不是width 作为.rightbar，你可以修复它（至少对于firefox，但老实说我需要说我现在没有时间检查这是否可行浏览器）

这里有同样问题的类似问题：
css jquery position fixed element on the right. animate BUG in Firefox

这个问题更清楚地表明这是FF的问题，因为那里right的值没有被触及，而只是bottom的值被改变了，但效果和你的例子一样。

【讨论】：

@ĐàoMinhHạt position 问题已在 ff 23（测试版）中修复。所以它只是版本 19 到 22。