title: jquery animate and removeClass with addClass
body: <p>When I "<strong>removeClass('below')</strong>", it removes the css class, but when I click on the object again it performs the same action.</p>
  
  <p>I am trying to take away the ability for the click function to work by removing the css code.  What am I doing wrong?</p>
  
  <pre><code>$('.below').click(function() {
      $(this).removeClass('below');
      $('#welcome').removeClass('fadeInLeft, bounceOutLeft').addClass('fadeOutLeft');
      $('#welcome_search').delay('500').animate({"top": "-=140px"},"slow");
  });
  </code></pre>
  
  <p>My html looks similar to this:</p>
  
  <pre><code>&lt;div id="welcome_item" class="below"&gt;
      stuff
  &lt;/div&gt;
  </code></pre>
  
  <p>Please help with this, thank you.</p>
  
  <p>What if I want to rebind the click after I change out the class?</p>
  
  <pre><code>$('.below').click(function() {
      $(this).unbind('click').removeClass('below').addClass('above');
      $('#welcome').removeClass('fadeInLeft bounceOutLeft').addClass('fadeOutLeft');
      $('#welcome_search').delay('500').animate({"top": "-=140px"},"slow");
  });
  
  $('.above').click(function() {
      $(this).removeClass('above').addClass('below');
      $('#welcome_search').animate({"top": "+=140px"},"slow");
      $('#welcome').removeClass('fadeInLeft bounceOutLeft fadeOutLeft').delay('500').addClass('fadeInLeft');
  });
  </code></pre>