Transparent PNG animate problem on Internet Explor

Question

CSS Code:

#btn{
  background: url(transparent.png) no-repeat;
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  -khtml-opacity: 0;
  opacity: 0;
}

JavaScript/jQuery:

$("#btn").animate({opacity:1,"margin-left":"-25px"});

I don't have any problem with the code above on Firefox, Chrome and others. But it does not work on any version of Internet Explorer.

The problem is the PNG image is rendered strange, background of the transparent PNG looks black. When I remove opacity effect, there is no problem.

What is the solution?

Answer 1

HERE IS THE FIX! Update to the latest jQuery. Thats it. It works after that.

Answer 2

Use PNG image for modern Browsers ( mozilla , Opera, Chrome etc ) :

background:url(../images/banner01.png) no-repeat right 13px;

Add this For IE ( Use another CSS Or use IE hack )

/* ie fix */
background-image:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/banner01.png",
 sizingMethod="crop");

Answer 3

I think there is a real solution here : http://www.viget.com/inspire/jquery-ie-png-24-ie-black-background-issue-solved/

In my case it solved the awefull black bg on my animated png image with transparent background. It worked like a charm. Tested on ie7+ I can't test ie6 for the moment.

Hope it will help every one :) Julien

Answer 4

For me it worked to just include the filter property with blank value in jQuery's .animate()function

Maybe this will work for you, too.

$("#btn").animate({opacity:1,"margin-left":"-25px", filter:''});

Additionally you might have to remove the filter property from your button's CSS.