title: Animate background color change with toggleClass?
body: <p>Is it possible to animate a background color change with toggleClass? </p>
  
  <p><a href="http://www.gtacswim.info/tools/Tests/JQueryUI.aspx#" rel="nofollow">Here is the page working currently.</a> - this has been updated since first post</p>
  
  <p>Is it possible to animate this? I have to use toggleClass instead of the JQuery UI extended animate because there are background-images in the original CSS and animate will change the background-color, but not remove the background-image. Plus, I want to toggle it, not change the background-color permanently.</p>
  
  <p>Here is the current javascript:</p>
  
  <pre><code>function ToggleClass() {
              $("#Section2").toggleClass("errorpanel");
              $("#Secion2HeaderText").toggleClass("errortext");
          }
  </code></pre>
  
  <p>Secondly, as you see, I have to change the CSS files twice. I can't understand why this class for the </p>
  
  <pre><code>.errorpanel{ color: #ffffff !important; background: red !important;}
  </code></pre>
  
  <p>does not endtend down to the  tag. It will change the accordion header to white when it is not selected, but when it is selected, it leaves the background as red, but changes the color to the original shade of blue. I can override that and get it to stay white all the time by adding this class:</p>
  
  <pre><code>.errortext{color: #ffffff !important;}
  </code></pre>
  
  <p>Anyway, I would like to animate those both forward and back.</p>
  
  <p>Edit:</p>
  
  <p>I am thinking something like this:</p>
  
  <pre><code>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");
      }
  </code></pre>
  
  <p>That looks to see if the background is red. If it is, it changes the background color back to the original value, with the background image (and the panel still changes to a lighter color when selected, so all original functionality is returned), it just doesn't animate back to blue. The only thing the toggle does now is remove the background image because that can't be animated. <a href="http://www.gtacswim.info/tools/Tests/JQueryUI.aspx" rel="nofollow">This page shows the current functionality.</a></p>