javascript - 在 Firefox 中使用百分比时，jQuery 动画无法正确计算位置

Question

当我使用 jQuery 为流体宽度位置设置动画时，我在 Firefox 中遇到了一些奇怪的行为:绝对 div。它在 Chrome 中运行良好。奇怪的是，我也尝试过旧版本的 jQuery，似乎这个问题发生在 jQuery 1.8.3 及更高版本中。

您可以在此处查看问题的 fiddle :http://jsfiddle.net/movwb2un/

CSS:

#wtf {
    background: #abf;
    border: 3px solid #007;
    position: absolute;
    top: 20%;
    right:50%;
    bottom: 30%;
    left: 0%;
}

HTML:

<div id="wtf"></div>
<button id="left">go left</button><button id="right">go right</button>

JS:

$('#left').click(function(){ $('#wtf').animate({'left':'0%','right':'50%'}); });
$('#right').click(function(){ $('#wtf').animate({'left':'50%','right':'0%'}); });

更多测试用例:http://jsfiddle.net/aau6vnfo/

Answer 1

这看起来绝对是一个错误，不确定它是 jQuery 还是 Firefox 问题(或 Chrome 问题)。

http://jsfiddle.net/ty517w5e/
在第二行中将 right : 0% 替换为 right : 0 似乎可以修复它。