Bug Tracker

#14700 closed bug (notabug)

Opened January 16, 2014 09:47PM UTC

Closed January 20, 2014 05:11PM UTC

HTML5 style prevents jQuery animation

Reported by: StevenWellens@gmail.com Owned by:
Priority: undecided Milestone: None
Component: unfiled Version: 1.10.2
Keywords: Cc:
Blocked by: Blocking:
Description

I am using this to fade an image in and out:

$("#MainImage").animate({ opacity: 0.15 }, 4000).animate({ opacity: 1.0 }, 4000);

I added this HTML5 transform style and the animate no longer runs:

#MainImage{
    transition-duration:3s;
}

I don't consider this to be an important bug but it may uncover problems that ARE important.

Attachments (0)
Change History (2)

Changed January 16, 2014 09:52PM UTC by anonymous comment:1

JSFiddle here: http://jsfiddle.net/F5LXc/

Changed January 20, 2014 05:11PM UTC by m_gol comment:2

resolution: → notabug
status: new → closed

Since you set transition-duration to 3s, changing opacity via animate is delayed which makes it look as the value is not changing. The solution is simple - don't mix animate & CSS transitions on the same element.