0

コンテナのクラスが変更されたときに背景グラデーションをフェードインさせようとしています。コードは IE 10 では問題なく動作しますが、Chrome や Firefox では動作しません。

リンクがクリックされると、jquery はクラスを交換します。フェードはieでうまく機能します。jquery と一緒に、スワップされるクラスを含む css は次のとおりです。

#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