Opened 10 years ago

Closed 10 years ago

Last modified 10 years ago

#6782 closed bug (notabug)

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;
}

Change History (5)

comment:1 Changed 10 years ago by Scott González

Resolution: invalid
Status: newclosed

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

comment:2 Changed 10 years ago by pavel.frankov

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?

comment:3 Changed 10 years ago by Scott González

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.

comment:4 in reply to:  3 Changed 10 years ago by pavel.frankov

Replying to 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?

comment:5 Changed 10 years ago by Scott González

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.

Note: See TracTickets for help on using tickets.