Hi there,

 

I've got a couple of images which I'm applying a fade opacity to when the mouse is hovered over it. This simple animation works fine in Firefox, Chrome, Opera and Safari. However, in Internet Explorer small white dots appear after the first hover and stay there??? I've tested in I.E. versions 6, 7 and 8 and they appear in all of them.

 

Here's a link to an example...the white dots are a little clearer on the bottom image:

 

http://www.delightfulweb.com/fadeopacity.html

 

Here's the HTML:

 

 <div id="content">

                    <a class="fade" style="position:absolute; left:0px; top:10px;" href="http://www.tottenhamhotspur.com/matches/matches_frr.html"><img src="images/bunny.jpg" alt="White Hart Lane" /></a>
                    <a class="fade" style="position:absolute; left:0px; top:520px;" href="http://en.wikipedia.org/wiki/Paul_Gascoigne"><img src="images/stick.jpg" alt="Gazza" /></a>

   </div> <!-- END of DIV Content -->     

 <style type="text/css">
       img {border:none;}
       #content a {position:absolute;}
</style>

<script src="scripts/FadeOpacity.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
 $(".fade").FadeOpacity({opacity:'0.4'});
});
</script>

 

And here's the FadeOpacity script:

 

(function($){

$.fn.FadeOpacity = function(opt)
{   
   var defaults = {
       opacity:0.5,
       duration:305
   };

   var options = $.extend(defaults, opt);

   $(this).mouseover(function() 
   {
     $(this).animate({opacity:options.opacity},{queue:false, duration:options.duration});
   });   

   $(this).mouseout(function() 
   {            
     $(this).animate({opacity:1},{queue:false, duration:options.duration});
   });
};

})(jQuery);

 

 

Anyone else had these problems? Any clues for a workaround in I.E.?

this may help

 

http://stackoverflow.com/questions/1284163/jquery-ie-fadein-and-fadeout-opacity

Thanks for your reply zed.

 

I've tried a few suggestions on that link but to no avail.

 

It's a strange one as the image I'm using is a non-transparent .jpg. However, after testing with a coloured div background, it seems as though the FadeOpacity jquery script in I.E. is causing the jpg to become transparent in a few places.

 

I've updated it with a red background and now you can clearly see red dots after hovering over the images (http://www.delightfulweb.com/fadeopacity.html)

not sure I saw red dots but there were lesser dots than when the bakckground was white.

 

I tried with a black background and get no dots.

The same amount of dots appeared for both red and white BGs on my I.E.

 

For now I can just apply a black background to the div behind the image as it only seems to effect black pixels. Not an ideal workaround but it'll do for now.

 

Another annoying I.E. bug!