IE jquery opacity works weird in IE10

Question

In my project the left side of the content is .container, and there's a preloader in #preloader.

In all major browsers it works as I want it, when all the content loads, page fades in. But in IE, container has no opacity in the begining and #preloader is removed when the page content loads in the end.

Style of container:

.container{
    height: 100%;
    filter:alpha(opacity=0);
    -moz-opacity:0;
    -khtml-opacity: 0;
    opacity: 0;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
}

And the javascript codes:

function init_on_load(){
    $("#preloader").remove();
    $(".container").animate({opacity: 1}, {duration: 1000});
}

$(window).on("load",
    function(){
        init_on_load();
    }
);

What do you think? What would be the problem? Thanks

Answer 1

Dont try to hack opacity for IE, hide the div with jQuery and fade it in the same way. This way you make sure your css does not overwrite any jQuery styles.

CSS:

.container {
    height: 100%;
    visibility: hidden;
}

JS:

(function($) {
  function init_on_load(){
      $("#preloader").remove();
      $(".container").css('visibility', 'visible').fadeTo(1000, 1);
  }

  $(document).ready(function() {
    $('.container').fadeTo(0, 0);
  });

  $(window).load(function() {
    init_on_load();  
  });

})(jQuery);

Answer 2

  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  /* IE 5-7 */
  filter: alpha(opacity=50);

I´ve had the same problem with the IE 7, the problem was a trailing comma after the opacity property

$(".container").animate({'opacity': 1,}, 1000);

It has to be:

jQuery(".container").animate({opacity:1.00},1000);

or this
Try to set the opacity to zero before you animate it:

$(".container").css({ opacity: 0.0 }).animate( {opacity:1}, 1000);

another
Opacity does not work in IE (older versions). You will need to animate the filter property: IE

  var val = 1;
  //{filter: 'alpha(opacity = '+(val * 100)+')'}
  $(".container").animate({
      'opacity': 1,
      '-ms-filter': 'progid:DXImageTransform.Microsoft.Alpha(opacity=**val**)',
      filter: 'alpha(opacity = '+(val * 100)+')'
  }, 1000);