0

当容器上的类更改时，我试图使 bg 渐变淡入。该代码在 IE 10 中运行良好，但在 Chrome 或 Firefox 中运行良好，这很不寻常，IE 通常是痛苦的！

我声明了 3 个类，单击链接时 jquery 交换类。褪色在 ie 中效果很好。这是带有正在交换的类的 css 以及 jquery：

#container.home #content{
    width:100%;
    display:table-row;
    height:100%;

}
#container.home.primary #content{
    background-color:#fbac19;
    background-image:-moz-linear-gradient(left,#79c043  45%,#ffffff 80%);    
    background-image:-webkit-linear-gradient(left,#79c043  45%,#ffffff 80%);    
    background-image:-ms-linear-gradient(left,#79c043  45%,#ffffff 80%);    
    background-image:-o-linear-gradient(left,#79c043  45%,#ffffff 80%);
    -moz-transition:background-image 2000ms linear;
    -webkit-transition:background-image 2000ms linear;
    -o-transition:background-image 2000ms linear;
    -ms-transition:background-image 2000ms linear;
    transition:background-image 2000ms linear;   
}

#container.home.secondary #content{
    background-color:#50c0ef;
    background-image:-moz-linear-gradient(left,#50c0ef 45%,#ffffff 80%);
    background-image:-webkit-linear-gradient(left,#50c0ef 45%,#ffffff 80%);
    background-image:-ms-linear-gradient(left,#50c0ef 45%,#ffffff 80%);
    background-image:-o-linear-gradient(left,#50c0ef 45%,#ffffff 80%);
    -moz-transition:background-image 2000ms linear;
    -webkit-transition:background-image 2000ms linear;
    -o-transition:background-image 2000ms linear;
    -ms-transition:background-image 2000ms linear;
    transition:background-image 2000ms linear;
}

#container.home.colleges #content{
    background-color:#fbac19;
    background-image:-moz-linear-gradient(left,#fbac19 45%,#ffffff 80%);    
    background-image:-webkit-linear-gradient(left,#fbac19 45%,#ffffff 80%);    
    background-image:-ms-linear-gradient(left,#fbac19 45%,#ffffff 80%);    
    background-image:-o-linear-gradient(left,#fbac19 45%,#ffffff 80%);
    -moz-transition:background-image 2000ms linear;
    -webkit-transition:background-image 2000ms linear;
    -o-transition:background-image 2000ms linear;
    -ms-transition:background-image 2000ms linear;
    transition:background-image 2000ms linear;
}

<script type="text/javascript">
            $(document).ready(function(){
                //home page search tab click
                $("#container.home ul#search-nav li a").click(function(){
                    // get the rel 
                    var rel = $(this).attr("rel");

                    // remove active class from all links
                    $("#container.home ul#search-nav li a").removeClass("active");

                    // remove classes from body
                    $("#container").removeClass("primary"); 
                    $("#container").removeClass("secondary");
                    $("#container").removeClass("colleges");

                    // add the new class
                    $("#container").addClass(rel);

                    // add active class tolink
                    $(this).addClass("active");

                    return false;
                });
            });
        </script>
4

0 回答 0