#6782 closed bug (notabug)

Opened December 25, 2010 09:18PM UTC

Closed December 25, 2010 09:36PM UTC

Last modified December 25, 2010 11:05PM UTC

IE opacity doesn't work with animated addClass and removeClass

Reported by: pavel.frankov Owned by:
Priority: minor Milestone: 1.9.0
Component: ui.effects.core Version: 1.8.7
Keywords: Cc:
Blocked by: Blocking:
Description

Start from this piece of code:

#some-element {
	opacity: 0;
}
#some-element.Active {
	opacity: 1;
}

$("#some-element").addClass("Active", 1000);

In major browsers is pretty ok, but not in IE7-8, because IE doesn't know about property "opacity" which doesn't exist in computedStyle.

Hope this fix in getElementStyles function will be helpfull

function getElementStyles() {
	...
	newStyle["opacity"] = this.currentStyle ? this.currentStyle["opacity"] : newStyle["opacity"];

	return newStyle;
}
Attachments (0)
Change History (5)

Changed December 25, 2010 09:36PM UTC by scottgonzalez comment:1

resolution: → invalid
status: new → closed

IE doesn't support opacity, you need to use a filter. Even without the animation, IE won't show the opacity.

Changed December 25, 2010 09:45PM UTC by pavel.frankov comment:2

IE doesn't support property "opacity", but support different way to creating opacity.

$("#some-element").css({opacity: 0}).animate({opacity: 1}, 1000); // try this in IE

So, jQuery support opacity for IE, but jQuery UI Component doesn't support. Is it normal?

Changed December 25, 2010 10:17PM UTC by scottgonzalez comment:3

Yes, there's a big difference. As I said before, without the animation the opacity set via the class won't have any effect in IE, so it's correct to not animate it.

Changed December 25, 2010 10:26PM UTC by pavel.frankov comment:4

Replying to [comment:3 scott.gonzalez]:

Yes, there's a big difference. As I said before, without the animation the opacity set via the class won't have any effect in IE, so it's correct to not animate it.

Ok! Then I have another question: why **filter:alpha(opacity=100)** as well as **filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100)** doesn't animate? Is it bug or feature?

Changed December 25, 2010 11:05PM UTC by scottgonzalez comment:5

It's not a bug; class animations only work on scalar values, not functions. #5804 is a request to support transformations, which would require allowing animations to run against functions. Please move any further discussion to the Developing jQuery UI forum.