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

Question

I have div element with CSS style:

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

and I want to change div's position-top with jQuery animation. Also within this animation process I need to change opacity.

I tried to do it with this jQuery script:

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

It works as I need in Firefox, but in Chrome position animation doesn't work. Div changes position immediately after animation complete.

PS: If I change to position:relative then it works good in both browsers, but I need to do it with position:absolute;

How to fix this?

Here is the fiddle. Try in both browsers and you'll see the difference: http://jsfiddle.net/eJXLf/

.

-----UPDATE-----

This is how it looks in Chrome and Firefox:

Chrome: ............................................... Firefox:

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

Answer 1

This is hard for me to test because I can't replicate it in my version of chrome, but you could try using marginTop instead?

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

Answer 2

Looks like this is Chrome bug.

I used Chrome 33.0.1750.46 beta-m but when I tested in Version 34.0.1812.0 it works ok.

Thanks for replies.

Answer 3

Works fine in Chrome 32.0.1700.76 for me. Both position and opacity animate smoothly.