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

Answer 2

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

我在IE 7中遇到了同样的问题，问题是在不透明度属性之后的尾随逗号

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

必须是：

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

或者这个在设置动画之前，尝试将不透明度设置为零：

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

另一个
不透明度在IE（旧版本）中不起作用。您需要为filter属性设置动画： 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);

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

2 个答案: