Side navigation
#9074 closed bug (fixed)
Opened May 03, 2011 08:05PM UTC
Closed May 07, 2011 11:20PM UTC
Last modified March 17, 2012 08:54PM UTC
Cannot animate position and opacity at same time
| Reported by: | henrykuo1@gmail.com | 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.
Attachments (0)
Change History (13)
Changed May 03, 2011 08:12PM UTC by comment:1
| _comment0: | Sorry, this is my first bug report, so don't know how to modify the original post. \ \ I've put a supre 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. → 1304453590994269 |
|---|
Changed May 03, 2011 08:13PM UTC by comment:2
| component: | unfiled → effects |
|---|---|
| priority: | undecided → high |
| status: | new → open |
Confirmed. http://jsfiddle.net/timmywil/xHn9w/
Changed May 05, 2011 02:21PM UTC by comment:4
You can temporarily fix it if you add 'px' to your value.
Changed May 05, 2011 10:09PM UTC by comment:5
Opacity seems to break animations using margin properties as well:
Changed May 07, 2011 10:53PM UTC by comment:8
| owner: | → gnarf |
|---|---|
| status: | open → assigned |
Changed May 07, 2011 11:20PM UTC by comment:9
| resolution: | → fixed |
|---|---|
| status: | assigned → closed |
Landing pull request 372. Test for numeric properties was using wrong variable. Fixes #9074.
More Details:
Changeset: 31268449b9255b21fad4bafd7da13c910a00af37
Changed May 07, 2011 11:21PM UTC by comment:10
| milestone: | 1.next → 1.6.1 |
|---|---|
| priority: | high → blocker |
Changed May 08, 2011 04:26PM UTC by comment:11
#9175 is a duplicate of this ticket.
Changed May 15, 2011 02:51PM UTC by comment:12
For some reason, if you make opacity the first in your list of animated properties, it fixes the problem.
Changed May 15, 2011 02:54PM UTC by comment:13
Replying to [comment:12 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.
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.