4

I have a div fading in using fadeTo. It works great in Firefox and IE9. It does not work in IE8. Here is my code:

JS:

var $j = jQuery.noConflict();
    window.onload = function(){ 
    $j('#fadein').fadeTo(6000, 1, function() {
  });       
};

HTML

<div class="img-center" id="fadein" style="opacity:0;">
<img src="src.jpg" alt="Text" class="feature-image" />
</div>

How do I get this to work in IE8? I do not mind changing from fadeTo to fadeIn or some other method of fading in a div as long as it works in IE8.

L84
  • 45,514
  • 58
  • 177
  • 257
  • 1
    Why on earth would you use window.onload ? – adeneo Jul 09 '12 at 03:02
  • @adeneo - I have a GIF animation loading above the div fading in and I want that fully loaded before the script fires. I am open to different or better methods. – L84 Jul 09 '12 at 03:05
  • http://stackoverflow.com/questions/1284163/jquery-ie-fadein-and-fadeout-opacity – Conner Jul 09 '12 at 03:10

1 Answers1

5

jQuery's fadeTo() should work in IE8, however the element has to have "layout", see this on "haslayout", and the CSS syntax for opacity in crappy browsers are :

.transparent_class {
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

  /* IE 5-7 */
  filter: alpha(opacity=50);

  /* Netscape */
  -moz-opacity: 0.5;

  /* Safari 1.x */
  -khtml-opacity: 0.5;

  /* Good browsers */
  opacity: 0.5;
}
adeneo
  • 312,895
  • 29
  • 395
  • 388
  • Thanks that solved the issue. I thought it may be something like that. But I could not remember the correct code! – L84 Jul 09 '12 at 03:25