title: How to remove class after animation is complete?
body: <p>your help would be appreciated:</p>
  
  <p>I created this slider with jQuery, which you can see here: <a href="http://www.room4.co/TEST/contentHub/index2.html" rel="nofollow">demo url</a></p>
  
  <p>The back buttons take you back to the start (rewind animation) in case you wanna revisit the steps.</p>
  
  <p>Associated to the rewind animation there's an <code>.addClass("fadeOut")</code> given to <code>.textBox</code>, so that they fade out.</p>
  
  <p>I would like to get rid of <code>.fadeOut</code> once the rewind animation is completed so that the boxes can fade in again when clicking on <code>.forward</code>.</p>
  
  <p>I made an attempt with the commented code below but it doesn't seem to work.</p>
  
  <pre><code>$('.forward').click (function(e) {  
      e.preventDefault(); 
      $(this).parent().parent().next().find($(".textBox")).addClass("fadeIn");
      $(this).parent().parent().next().find($(".textBox .forward")).addClass("fadeIn");
      $(this).addClass("fadeOut");
  });
  
  
  $('.moveFluxDouble').click (function(e) {   
      e.preventDefault(); 
      $(".flux").animate({"left": "-=66.6666666%"},"slow");
  });
  
  
  $('.moveFlux').click (function(e) { 
      e.preventDefault(); 
      $(".flux").animate({"left": "-=33.3333333%"},"slow");
  });
  
  
  $('.moveFluxBack').click (function(e) { 
      e.preventDefault(); 
      $(".flux").animate({"left": "0"},"slow");
      $(".forward").removeClass("fadeIn");
      $(".forward").removeClass("fadeOut");
      $(".textBox").removeClass("fadeIn");
      $(".textBox").not(".start .textBox").addClass("fadeOut");
  
      //.queue( 
          //function() {
          //$(".textBox").not(".start .textBox").removeClass("fadeOut");
  
  });
  </code></pre>