Bug Tracker

Modify

Ticket #9074 (closed bug: fixed)

Opened 3 years ago

Last modified 2 years ago

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:
Blocking: Blocked by:

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

comment:1 Changed 3 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 3 years ago by henrykuo (previous) (diff)

comment:2 follow-up: ↓ 4 Changed 3 years ago by timmywil

  • Priority changed from undecided to high
  • Status changed from new to open
  • Component changed from unfiled to effects

comment:3 Changed 3 years ago by timmywil

#9118 is a duplicate of this ticket.

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

 http://jsfiddle.net/B3vdC/

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

comment:5 Changed 3 years ago by fparent

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

comment:6 Changed 3 years ago by rwaldron

#9133 is a duplicate of this ticket.

comment:7 Changed 3 years ago by timmywil

#9136 is a duplicate of this ticket.

comment:8 Changed 3 years ago by gnarf

  • Owner set to gnarf
  • Status changed from open to assigned

comment:9 Changed 3 years ago by gnarf

  • Status changed from assigned to closed
  • Resolution set to fixed

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

More Details:

comment:10 Changed 3 years ago by timmywil

  • Priority changed from high to blocker
  • Milestone changed from 1.next to 1.6.1

comment:11 Changed 3 years ago by rwaldron

#9175 is a duplicate of this ticket.

comment:12 follow-up: ↓ 13 Changed 3 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 3 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.

Please follow the  bug reporting guidlines and use  jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.

View

Add a comment

Modify Ticket

Action
as closed
Author


E-mail address and user name can be saved in the Preferences.

 
Note: See TracTickets for help on using tickets.