IE jquery opacity работает странно в 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

Dont попытаться взломать непрозрачности для IE, скрыть DIV с JQuery и исчезать его таким же образом. Таким образом, вы убедитесь, что ваш 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); 

I've была та же проблема с IE 7, эта проблема была Запятая после свойства непрозрачности

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

Она должна быть:

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

или это
Попробуйте установить непрозрачность до нуля, прежде чем вы ее оживите:

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

другой
Непрозрачность не работает в IE (более старые версии). Вам нужно будет анимировать свойства фильтра: 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);