FadeIn / fadeOut jQuery issue with IE7 / 8 & png

Question

Hey guys, I'm trying to make the background of a magnifying glass when use is in the image that can be enlarged. This uses an empty space and does not show its display until it is visible, and its background will be translucent png with a magnifying glass in the center.

This is done using fadeIn / fadeOut and works fine in all other browsers except IE.

In IE, the background of the image blinks to dark gray before fading to the correct image when you hover and hover.

Here is an example of what I'm working on, his three smaller images in a row:

http://www.brainbuzzmedia.com/themes/amplify/html/index.html

I read that resolving this issue adds a background color to the element, which fades, but obviously this will not work, because I need to use translucent png as the background. Does anyone know what I can do about this?

Answer 1

I won’t get a flash of dark gray. What I can consider as a solution either has another div of the same size as the image located absolutely behind the image and using the png background.

OR

use the opacityms property and filter for IE.

Answer 2

I had a similar problem.

After running fadein / fadeout, call:

 $("#myelement").css('filter', 'none');

This worked for me when IE 7 and 8 left unpleasant black spots where the opacity should have been after the fading effect.

Answer 3

. , :

jQuery IE Cleartype glitch on fadeout!

, fadeOut.