title: jQuery UI - addClass removeClass - CSS values are stuck
body: <p>I'm trying to do a simple animation.</p>
  
  <ol>
  <li>You show the div. It animates correctly.</li>
  <li>You hide the div. Correct.</li>
  <li>You show the div again. It shows but there is no animation. It is stuck at the value of when you first interrupted it.</li>
  </ol>
  
  <p>So somehow the interpolation CSS that is happening during [add|remove]Class is getting stuck there. The second time around, the [add|remove]Class is actually running, but the css it's setting from the class is getting ignored (I think being overshadowed). How can I fix this WITHOUT resorting to .animate and hard-coded style values? The whole point was to put the animation end point in a css class.</p>
  
  <p>Thanks!</p>
  
  <pre><code>&lt;!doctype html&gt;
  
  &lt;style type="text/css"&gt;
  div {
      width: 400px;
      height: 200px;
  }
  .green {
      background-color: green;
  }
  &lt;/style&gt;
  
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $(function() {
      $('#show').bind({
          click: function() {
              showAndRun()
          }
      })
      $('#hide').bind({
          click: function() {
              $('div').stop(true, false).fadeOut('slow')
          }
      })
  
      function showAndRun() {
          function pulse() {
              $('div').removeClass('green', 2000, function() {
                  $(this).addClass('green', 2000, pulse)
              })
          }
          $('div').stop(true, false).hide().addClass('green').fadeIn('slow', pulse)
      }
  })
  &lt;/script&gt;
  
  &lt;input id="show" type="button" value="show" /&gt;&lt;input id="hide" type="button" value="hide" /&gt;
  &lt;div style="display: none;"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>You can also look at what it does <a href="http://jsbin.com/atugo" rel="nofollow noreferrer">here at jsbin</a></p>