jQuery animate 在 Firefox 中无法正常工作

Question

 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

Answer 1

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

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

如果你在.rightbar中使用min-width而不是width，你就可以修复它(至少对于firefox来说是这样，但老实说我需要说的是，我现在没有时间检查这是否可以跨浏览器工作)

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

这个问题更清楚地表明这是FF的问题，因为没有触及right值，而只改变了bottom值，但是随着与您的示例中的效果相同。