Question

I created a gallery with auto-play.

When the gallery STOP it’s animation and we hover the gallery, all works as expected.

But I am getting a strange issue:

While the gallery is animating –> hovering the gallery, the clearTimeout seem not to work correctly and on mouseleave the gallery behave strangely
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.

I am missing something crucial here

THE GALLERY IN QUESTION: jsFiddle

var myTimeOut;

/////// ANIMATION /////////////   
    function animation(cb){         
            $('#slider').animate({left: '-=600' },800, cb);
    }      
    /////// AUTO SLIDE ////////////
    function auto() {
        myTimeOut = setTimeout(function() {
            animation(function(){
                auto();                   
            });   
        }, 2000);
    }
    auto();

and how I’m trying to pause it:

    ///// MOUSE actions //////////   
    $('#galcontainer').mouseenter( function () {
      clearTimeout(myTimeOut);
    });
    $('#galcontainer').mouseleave( function () {
     auto();
    });

EDIT

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.

A fix to that issue could be adding a $(‘#slider’).stop() at mouseleave. Not a great solution.
What else can I do?

Answer 1

The issue: on mouseenter during the animation, the jQuery .animate() callback cb is already in queue (even if the clearTimeout was called, another auto() will be called which will trigger subsequent runs, etc.).

Using setInterval and leveraging all those callbacks is the key:

jsFiddle demo

$(function(){                 // DOM ready shorthand
    var $sli =  $("#slider"), // Cache elements you plan to reuse
        galW =  $('#gallery').width(),
        imgN =  $sli.find('img').length,
        counter = 0,          // set it to index 0!
        itv;                  // setInterval (scope var)
    
    $sli.width(galW * imgN);

    function anim() {
      ++counter; counter%=imgN;                       // Incr.counter; and wrap-around
      $sli.stop().animate({left: -galW*counter},900); // width*counter = px position
    }
    function autoSlide() {
        itv = setInterval(anim, 3000);
    }
    autoSlide();
    
    ///// MOUSE STATE //////////   
    $sli.hover(function(){ clearInterval(itv); }, autoSlide);
});

#galcontainer{
    position:relative;
    margin:20px auto;
    width:600px;
}
#gallery{
    position:relative;
    overflow:hidden;
    width:600px;
    height:240px;
}
#slider{
    position:absolute;
    top:0px;
    left:0px;
}
#slider img{
    float:left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="galcontainer">    
    <div id="gallery">    
        <div id="slider">
            <img src="http://dummyimage.com/600x240/479/fff"/>
            <img src="http://dummyimage.com/600x240/636/fff"/>
            <img src="http://dummyimage.com/600x240/587/fff"/>
            <img src="http://dummyimage.com/600x240/447/fff"/>
        </div>     
    </div>   
</div>

(Aside notes regarding the original (yet modified) code)

The direction variable with "+=" and "0-" is unneeded since there’s only one direction, so use a counter = 0 indexed, and wrap-around/reset using the Reminder % operator. Also,

        animation(function(){
            auto();                   
        }); 

can be written like:

       animation(auto);

since auto is already a function.

///// MOUSE STATE //////////   
$('#galcontainer').mouseenter( function () {
  clearInterval(myTimeOut);
});
$('#galcontainer').mouseleave( function () {
 auto();
});

can be used with .hover(fn1, fn2) method (like in the above example)