[jQuery] Transparent png fade bug IE7
Hello everyone,
I'm having a problem that seems to have been brought up here and on
other discussion boards all over the web, but no one seems to have
come up with a solution... I am trying to fadeOut and fadeIn
transparent pngs. In IE7, all pixels that are transparent quickly turn
to black as soon as the opacity begins to change on the image. This
effect is fixed if I put a background-color other than transparent on
the images, but this is not an option, since there is content behind
the image. Does anyone have any ideas as to what I could do to fix
this, or do I need to tell the designer that this is impossible to do
w/ javascript? I appreciate any ideas...
<script>
var JQ = jQuery.noConflict();
JQ("#athlete-photo").fadeOut(300);
setTimeout(function(){
JQ("#athlete-photo").attr({'src':name+'.png'}).fadeIn(300); }, 300);
</script>
<html>
<head>
<style>
#athlete-photo { position: absolute; bottom: 0; left: 144px;
background-color: transparent; }
</style>
</head>
<body>
<div id="athlete-photo-container"><img id="athlete-photo"
class="slideshow-img" src="name_01.png" alt="" /></div>
</body>
</html>