CSS背景图像转换

Question

我正在尝试在更改容器上的类时使bg渐变渐入淡出。代码在IE 10中运行良好，但不适用于Chrome或Firefox，这非常不寻常，IE通常很痛苦！

我声明了3个类，当点击链接时，jquery交换类。褪色效果很好。这是包含正在交换的类的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>