コンテナのクラスが変更されたときに背景グラデーションをフェードインさせようとしています。コードは 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>