title: animating addClass/removeClass with jQuery
body: <p>I am using jQuery and jQuery-ui and want to animate various attributes on various objects. </p>
  
  <p>For the sake of explaining the issue here I've simplified it to one div that changes from blue to red when the user mouses over it.</p>
  
  <p>I am able to get the behavior I want when using <code>animate()</code>, however when doing so the styles I am animating have to be in the animation code and so are separate from my style sheet. (see <strong>example 1</strong>)</p>
  
  <p>An alternative is using <code>addClass()</code> and <code>removeClass()</code> but I have not been able to re-create the exact behavior that I can get with <code>animate()</code>. (see <strong>example 2</strong>)</p>
  
  <hr>
  
  <h3>Example 1</h3>
  
  <p>Let's take a look at the code I have with <code>animate()</code>:</p>
  
  <pre><code>$('#someDiv')
    .mouseover(function(){
      $(this).stop().animate( {backgroundColor:'blue'}, {duration:500});
    })
    .mouseout(function(){
      $(this).stop().animate( {backgroundColor:'red'}, {duration:500});
    });
  </code></pre>
  
  <p>it displays all the behaviors I am looking for:</p>
  
  <ol>
  <li>Animates smoothly between red and blue.</li>
  <li>No animation 'overqueue-ing' when the user moves their mouse quickly in and out of the div.</li>
  <li>If the user moves their mouse out/in while the animation is still playing it eases correctly between the current 'halfway' state and the new 'goal' state.</li>
  </ol>
  
  <p>But since the style changes are defined in <code>animate()</code> I have to change the style values there, and can't just have it point to my stylesheet. This 'fragmenting' of where styles are defined is something that really bothers me.</p>
  
  <hr>
  
  <h3>Example 2</h3>
  
  <p>Here is my current best attempt using <code>addClass()</code> and <code>removeClass</code> (note that for the animation to work you need jQuery-ui): </p>
  
  <pre><code>//assume classes 'red' and 'blue' are defined
  
  $('#someDiv')
    .addClass('blue')
    .mouseover(function(){
      $(this).stop(true,false).removeAttr('style').addClass('red', {duration:500});
    })
    .mouseout(function(){
      $(this).stop(true,false).removeAttr('style').removeClass('red', {duration:500});
    });
  </code></pre>
  
  <p>This exhibits both property 1. and 2. of my original requirements, however 3 does not work.</p>
  
  <p>I understand the reason for this:</p>
  
  <p>When animating <code>addClass()</code> and <code>removeClass()</code> jQuery adds a temporary style to the element, and then increments the appropriate values until they reach the values of the provided class, and only then does it actually add/remove the class.</p>
  
  <p>Because of this I have to remove the style attribute, otherwise if the animation is stopped halfway the style attribute would remain and would permanently overwrite any class values, since style attributes in a tag have higher importance than class styles.</p>
  
  <p>However when the animation is halfway done it hasn't yet added the new class, and so with this solution the color jumps to the previous color when the user moves their mouse before the animation is completed.</p>
  
  <hr>
  
  <p>What I want ideally is to be able to do something like this:</p>
  
  <pre><code>$('#someDiv')
    .mouseover(function(){
      $(this).stop().animate( getClassContent('blue'), {duration:500});
    })
    .mouseout(function(){
      $(this).stop().animate( getClassContent('red'), {duration:500});
    });
  </code></pre>
  
  <p>Where <code>getClassContent</code> would just return the contents of the provided class. The key point is that this way I don't have to keep my style definitions all over the place, but can keep them in classes in my stylesheet.</p>