Bug Tracker

Opened 6 years ago

Closed 6 years ago

Last modified 5 years ago

#9074 closed bug (fixed)

Cannot animate position and opacity at same time

Reported by: henrykuo1@… Owned by: gnarf
Priority: blocker Milestone: 1.6.1
Component: effects Version: 1.6
Keywords: Cc:
Blocked by: Blocking:

Description

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.

Change History (13)

comment:1 Changed 6 years ago by 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.

Last edited 6 years ago by henrykuo (previous) (diff)

comment:2 Changed 6 years ago by timmywil

Component: unfiledeffects
Priority: undecidedhigh
Status: newopen

comment:3 Changed 6 years ago by timmywil

#9118 is a duplicate of this ticket.

comment:4 in reply to:  2 Changed 6 years ago by anonymous

http://jsfiddle.net/B3vdC/

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

comment:5 Changed 6 years ago by fparent

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

comment:6 Changed 6 years ago by Rick Waldron

#9133 is a duplicate of this ticket.

comment:7 Changed 6 years ago by timmywil

#9136 is a duplicate of this ticket.

comment:8 Changed 6 years ago by gnarf

Owner: set to gnarf
Status: openassigned

comment:9 Changed 6 years ago by gnarf

Resolution: fixed
Status: assignedclosed

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

More Details:

comment:10 Changed 6 years ago by timmywil

Milestone: 1.next1.6.1
Priority: highblocker

comment:11 Changed 6 years ago by Rick Waldron

#9175 is a duplicate of this ticket.

comment:12 Changed 6 years ago by 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/

comment:13 in reply to:  12 Changed 6 years ago by 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.

Note: See TracTickets for help on using tickets.