javascript - 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; 来做到这一点

如何解决这个问题？

这是 fiddle 。在两种浏览器中尝试一下，您会看到差异: http://jsfiddle.net/eJXLf/

.

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

这是它在 Chrome 和 Firefox 中的样子:

Chrome:...................................... ...... 火狐浏览器:

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

Answer 1

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

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