Cannot animate position and opacity at same time

[henrykuo1@…]

Including both a position (left or top) and opacity properties in an animate method, the position does not animate. Only the opacity animates, and at the end of the duration, the position immediately jumps to the new position property.

[henrykuo]

Sorry, this is my first bug report, so don't know how to modify the original post.

I've put a super quick example here: ​http://henrykuo.com/jquerytest/test.html

On mac, this occurs in Safari, Firefox, and Chrome. Removing the 'opacity' property, the position animates correctly.

[Timmy Willison]

Confirmed. ​http://jsfiddle.net/timmywil/xHn9w/

[Timmy Willison]

#9118 is a duplicate of this ticket.

[anonymous]

​http://jsfiddle.net/B3vdC/

You can temporarily fix it if you add 'px' to your value.

[fparent]

Opacity seems to break animations using margin properties as well: ​http://jsfiddle.net/fparent/69eEL/

[Rick Waldron]

#9133 is a duplicate of this ticket.

[Timmy Willison]

#9136 is a duplicate of this ticket.

[gnarf]

​https://github.com/jquery/jquery/pull/372

[gnarf]

Landing pull request 372. Test for numeric properties was using wrong variable. Fixes #9074.

More Details:

• ​https://github.com/jquery/jquery/pull/372 Changeset: 31268449b9255b21fad4bafd7da13c910a00af37

[Rick Waldron]

#9175 is a duplicate of this ticket.

[nicktheandroid@…]

For some reason, if you make opacity the first in your list of animated properties, it fixes the problem.

​http://jsfiddle.net/nicktheandroid/LJZ54/57/

[nicktheandroid@…]

Replying to nicktheandroid@…:

For some reason, if you make opacity the first in your list of animated properties, it fixes the problem.

​http://jsfiddle.net/nicktheandroid/LJZ54/57/

This page was listed as a duplicate of another, I posted the answer to the other, which might actually help this one too.. considering it's supposedly a duplicate but I don't have time to verify.