Jqueryが滑らかな遷移で背景色を変更する

Question

ボタンをクリックしてJqueryで背景色を変更する方法を知りましたが、どのように遷移を緩和するのか分かりません。私はトランジションを追加するために.cssメソッドを試しました。それは動作しません。ここで

は、それが動作しますが、背景に新色を追加するために、私のjQueryのです：

$("#playbtn").click(function(){ 
    $("#container").css("background", "#3953A0"); 
    $("#container").css("background", "-webkit-linear-gradient(to left, #3953A0, #2A3C70)"); 
    $("#container").css("background", "linear-gradient(to left, #3953A0, #2A3C70)"); 
    $("#container").css("background", "-moz-linear-gradient(to left, #3953A0, #2A3C70)"); 
    $("#container").css("filter", "progid:DXImageTransform.Microsoft.gradient(startColorstr='#3953A0', endColorstr='#2A3C70',GradientType=1)"); 
}); 

私の基本的な#containerのCSS：

#container { 
    width: 100%; 
    min-height: 100%; 
    position: fixed; 
    background: #00C9FF; /* fallback for old browsers */ 
    background: -webkit-linear-gradient(to left, #2A3C70 , #718DE2); /* Chrome 10-25, Safari 5.1-6 */ 
    background: linear-gradient(to left, #2A3C70 , #718DE2); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ 
    background: -moz-linear-gradient(left, #2A3C70 , #718DE2); /* For Firefox 3.6 to 15 */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2A3C70', endColorstr='#718DE2',GradientType=1); /* IE6-9 */ 
} 

あなたたちは私を助けることを願って！

Answer 1

を希望している、あなたは、要素に移行プロパティが必要になります。 CSSを使ってすべての変更をクラスで処理し、jQueryを使用してCSSクラスを切り替えることをお勧めします。これはより簡単に操作でき、よりコントロールしやすくなります！

CSS：

#container { 
    width: 100%; 
    min-height: 100%; 
    position: fixed; 
    background: #00C9FF; /* fallback for old browsers */ 
    background: -webkit-linear-gradient(to left, #2A3C70 , #718DE2); /* Chrome 10-25, Safari 5.1-6 */ 
    background: linear-gradient(to left, #2A3C70 , #718DE2); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ 
    background: -moz-linear-gradient(left, #2A3C70 , #718DE2); /* For Firefox 3.6 to 15 */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2A3C70', endColorstr='#718DE2',GradientType=1); /* IE6-9 */ 

    /* 
    Play with transition settings (time, ease type) 
    */ 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -ms-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
} 

#container.is-active { 
    background: #3953A0; /* fallback for old browsers */ 
    background: -webkit-linear-gradient(to left, #3953A0, #2A3C70); /* Chrome 10-25, Safari 5.1-6 */ 
    background: linear-gradient(to left, #3953A0, #2A3C70); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ 
    background: -moz-linear-gradient(to left, #3953A0, #2A3C70); /* For Firefox 3.6 to 15 */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3953A0', endColorstr='#2A3C70',GradientType=1); /* IE6-9 */ 
} 

JS：

$("#playbtn").click(function(){ 
    $("#container").addClass("is-active"); 
}); 

Answer 2

これは重複していることを確かめてください：jQuery animate backgroundColor、私は質問に印を付けることはできません。

基本的に、あなたはCSSを移行するには.animate()