toggleClassを使用して背景色をアニメーション化しますか？

Question

背景色の変更をtoggleClassでアニメーション表示できますか？

Here is the page working currently. - これは最初の投稿以降に更新されました

がこれをアニメーション化することが可能ですか？元のCSSには背景画像があり、アニメーションは背景色を変更しますが、背景画像は削除しないため、JQuery UIの代わりにtoggleClassを使用する必要があります。加えて、私はそれをトグルしたい、背景色を永久に変更しない。ご覧の通り、私は二回CSSファイルを変更する必要があり、

function ToggleClass() { 
      $("#Section2").toggleClass("errorpanel"); 
      $("#Secion2HeaderText").toggleClass("errortext"); 
     } 

第二：

は、ここで現在のjavascriptのです。私はこのクラスがなぜこのクラスの理由で理解できないのですか？

.errorpanel{ color: #ffffff !important; background: red !important;} 

タグの最後まではありません。選択されていないときは、アコーディオンのヘッダーが白に変わりますが、選択されている場合は背景が赤くなりますが、色は元の青の色に変わります。私はそれをオーバーライドして、それがこのクラスを追加することにより、すべての時間を白滞在する得ることができます。

.errortext{color: #ffffff !important;} 

とにかく、私は前後両方それらをアニメーション化したいと思います。

編集：

function ToggleClass() { 
     var color = $("#Section2").css("background-color"); 
     if (color == 'rgb(255, 0, 0)') { 
      $("#Section2").animate({ backgroundColor: "#507CD1" }, 2500); 
      $("#Section2").toggleClass("testerrorpanel"); 
     } 
     else { 
      $("#Section2").toggleClass("testerrorpanel"); 
      $("#Section2").animate({ backgroundColor: "red" }, 2500); 
     } 

     $("#Secion2HeaderText").toggleClass("errortext"); 
    } 

背景が赤であるかどうかを検索します：

私はこのような何かを考えています。そうであれば、バックグラウンドイメージを元の値に戻します（パネルが選択されても明るい色に変わり、すべて元の機能が返されます）。トグルが行うのは、アニメーション化できないため、背景イメージを削除することだけです。 This page shows the current functionality.

Answer 1

あなたは

$("#Section2").animate({ backgroundColor: "red" }, 2500).delay(800).animate({ backgroundColor: "#507CD1" }, 2500); 

ない100％必ず遅延

を使用して試みることができるが、私はこれが働くかもしれないと思います。