jquery - IE jquery 不透明度在 IE10 中工作很奇怪

Question

在我的元素中，内容的左侧是.container，#preloader 中有一个预加载器。

在所有主流浏览器中，它都按我想要的方式工作，当所有内容加载时，页面淡入。但在 IE 中，容器在开始时没有不透明度，#preloader 在页面内容最后加载时被删除。

容器样式:

.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);
}

和 javascript 代码:

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

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

你怎么看？会有什么问题？ 谢谢

Answer 1

不要尝试破解 IE 的不透明度，用 jQuery 隐藏 div 并以相同的方式淡化它。这样您就可以确保您的 css 不会覆盖任何 jQuery 样式。

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);