jQuery中的animate在firefox中的问题，请高手解答一下。

Question

页面上有一个div，一开始是隐藏，我要执行的动画效果是div的left从500移动到300，并且fadeIn效果。
代码如下：
jQuery('body').append('<div id="test" style="top:100px;left:500px;width:100px;height:100px;background-color:#000;position:absolute;display:none"></div>');
$('#test').animate({left:300,opacity:'show'});除Firefox外，其他都正常。firefox下面div是从left为0的地方移动到300处。而且不管是jquery1.4还是1.5都有问题。
如果在firefox要实现一个这样动画，应该怎么写？

Answer 1

奇怪，我在几个主流浏览器中都试了下（包括FF4.0），没出现你说的情况，都能正常运行，要不，你这样试试：
<script type="text/javascript">
$(document).ready( function() {
$("body").append('<div id="test" style="top:100px;left:500px;width:100px;height:100px;background-color:#000;position:absolute;display:none"></div>');
$('#test').animate({left:'-=200px',opacity:'show'});
});
</script>

Answer 2

杯具了，我在FF4上没有问题，但是在家用的FF3.x，晚上回去再试试。
多谢楼上的朋友了。

Answer 3

刚刚在同事firefox 3.x上测试了一下，的确有个问题。哪位高手帮忙解决一下。

Answer 4

我的firefox是3.6.12
我刚刚看了一下jquery的源码，发现问题的地方，在开始执行动画之前，计算left的时候是通过getComputedStyle和getPropertyValue实现的。
我在firefox中测试的时候发现，当一个div的display设置为none的时候，通过getComputedStyle和getPropertyValue计算出来的left是0px，所以执行动画的时候是从左边开始的。其他浏览器计算left的结果都是正确的。你可以试试下面的javascript代码，看看firefox中是0px还是800px。
$('body').append('<div id="test" style="top:100px;left:800px;width:100px;height:100px;background-color:#000;position:absolute;display:none"></div>');
alert(window.getComputedStyle(document.getElementById('test'),null).getPropertyValue('left'));