title: clearTimeout during gallery animation
body: <p>I created a gallery with auto-play.<br></p>
  
  <p>When the gallery STOP it's animation and we hover the gallery, all works as expected.</p>
  
  <p>But I am getting a strange issue:</p>
  
  <p><strong>While the gallery is animating</strong> --> hovering the gallery, the <strong>clearTimeout seem not to work correctly</strong> and on mouseleave the gallery behave strangely<br> or it's happening a strange conflict I cannot understand and resolve. I went back to an other gallery I made a couple of days before fith a similar functionality and I encountered the same issue.</p>
  
  <p>I am missing something crucial here</p>
  
  <p><strong>THE GALLERY IN QUESTION: <a href="http://jsfiddle.net/roXon/PXVSW/" rel="nofollow">jsFiddle</a></strong>  </p>
  
  <pre><code>var myTimeOut;
  
  /////// ANIMATION /////////////   
      function animation(cb){         
              $('#slider').animate({left: '-=600' },800, cb);
      }      
      /////// AUTO SLIDE ////////////
      function auto() {
          myTimeOut = setTimeout(function() {
              animation(function(){
                  auto();                   
              });   
          }, 2000);
      }
      auto();
  </code></pre>
  
  <p>and how I'm trying to pause it:</p>
  
  <pre><code>    ///// MOUSE actions //////////   
      $('#galcontainer').mouseenter( function () {
        clearTimeout(myTimeOut);
      });
      $('#galcontainer').mouseleave( function () {
       auto();
      });
  </code></pre>
  
  <h2>EDIT</h2>
  
  <p>Adding a 'hover flag' (as suggested in the answers) works almost great, but a small bug using this solution is visible when 'fast mouseenter/mouseleave DURING the animation.
  <br>
  A fix to that issue could be adding a $('#slider').stop() at mouseleave. Not a great solution. <br>
  What else can I do?</p>