title: stopping next hover animation from happening until current is complete
body: <p>I have a set of stacked images and a set of sentences to the right of the images. My program works like this: when you hover over a sentence, the corresponding image fades in to the front of the stack and the previous image fades out. I have a hover function that uses onmouseenter and onmouseleave, and in both, helper functions are called to perform the correct animation process.</p>
  
  <p>The problem I am having is if you hover over another sentence when the animation is being performed on the first one, it breaks. I researched stop(true, true) and possibly creating a callback function once animation is complete on current hover over, but these aren't effect fixes.</p>
  
  <p>Does anyone know of any ways to freeze a future animation until the current one's progress is complete? I shouldn't have to add to an array queue, but maybe I could set a boolean var inside the fade call to check the progress of the animation.</p>
  
  <p><strong>Possible solution:</strong> In my onmouseleave state of onHover(), i call setTimeOut with a delay of 300ms to check and see if the default img has an active class, and if not, i animate it in (which means that when the user leaves a sentence, after 300ms, the default image fades in). I think I can add to this function to delay the animation of the next hover over, if the user hovers over any other sentence.</p>
  
  <p><strong>What I've tried</strong></p>
  
  <pre><code>//get rid of intitial page load animation classes
  $('#pics img').not($currentCase).not('.active').removeClass('first next-in-line last-in-line');
  
  do {
      $currentCase
      //before this image is faded in, we need to add the next-in-line class so it is stacked right below the top image
          .addClass('next-in-line')
          .fadeIn(fadeSpeed, function () {
              ($(this).removeClass('next-in-line'))
          });
  } while ($('#pics img.active').is(':animated'));
  
  $currentCase.addClass('active');
  </code></pre>
  
  <ul>
  <li>The above freezes the script when initiating hover over a sentence.</li>
  </ul>
  
  <p>*<em>MY answer:</em>*For those who may have ran into a similar problem, in the call back function of fadeIn(), I used the below code for a fix:</p>
  
  <pre><code>$('.active').removeClass('active').hide();
  </code></pre>