jQuery：动画元素位置和不透明度在一起

Question

我有CSS样式的div元素：

.somediv {
    display: block;
    width: 100px;
    height: 100px;
    background: #4679BD;
    position: absolute;
    top: 10px;
    left: 100px;
    opacity: 0;
}

我想用jQuery动画改变div的位置顶部。同样在这个动画过程中我需要改变不透明度。

我尝试使用这个jQuery脚本：

$('.somediv').animate({
  'top':'150px',
  'opacity':'1'
}, 1000);

它可以在我需要的Firefox中运行，但在Chrome位置动画不起作用。 Div在动画完成后立即改变位置。

P.S：如果我更改为position:relative，那么它在两种浏览器中均可正常运行，但我需要使用position:absolute;

如何解决此问题？

这是小提琴。尝试使用这两种浏览器，您会看到差异： http://jsfiddle.net/eJXLf/

----- ----- UPDATE

这就是它在Chrome和Firefox中的外观：

铬： ...................................... ......... Firefox：

......................................

Answer 1

这对我来说很难测试，因为我无法在我的chrome版本中复制它，但您可以尝试使用marginTop吗？

$('.somediv').animate({
  marginTop: '150px',
  opacity: 1
}, 1000);

Answer 2

看起来这是Chrome错误。

我使用了 Chrome 33.0.1750.46 beta-m 但是当我在版本34.0.1812.0 中进行测试时，它运行正常。

感谢您的回复。

Answer 3

对我来说，Chrome 32.0.1700.76正常运行。位置和不透明度都能够平滑地生成。