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立即更改位置。

PS：如果我更改为position:relative则在两种浏览器中都可以正常工作，但是我需要使用position:absolute;来完成position:absolute;

如何解决这个问题？

这是小提琴。 在两种浏览器中尝试，您将看到不同之处： http : //jsfiddle.net/eJXLf/

。

----- -----更新

这是在Chrome和Firefox中的外观：

Chrome： ............................................... 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中可以正常工作。 位置和不透明度都可以平滑地动画。