Prevent element from animating based on previous class
<pre><code>$('.example').hover(
  function () {
    $(this).css('background','red');
  }, 
  function () {
    $(this).css('background','yellow');
  }
);

$('.test').click(function(){
    $(this).css('marginTop','+=20px').removeClass('example');
  }
);

&lt;div class="text example"&gt;&lt;/div&gt;
</code></pre>

<p>Although the class <code>example</code> was seemingly removed, the <code>hover</code> actions for it are still being applied to the element that once had that class. How can I prevent this?</p>

<p><a href="http://jsfiddle.net/gSfc3/" rel="nofollow">http://jsfiddle.net/gSfc3/</a></p>

<p>Here it is in jsFiddle. As you can see, after executing the <code>click</code> function to remove the class, the background still changes on hover.</p>
