Mouseover mouseleave jquery hover and restarting problems with simple.carousel.js

Question

I created editing on simple.carousel.js to stop the carousel when it hangs, but I had a problem reloading when the mouse. The code I added to simple.carousel.js is:

// hover stop if(config.auto!=true) $(this).mouseenter(function() { config.auto=false; }).mouseleave( function() { config.auto=true; }); 

Here you can see the full code / example with my addition above: http://jsfiddle.net/6r6sC/2/

Is there something wrong with my mouseleave function?

Not sure if this will help, but I also tried the following, but this also does not work:

 // hover stop if(config.auto!=true) $(this).mouseenter(function() { config.auto=false; }).mouseleave( function() { setTimeout(function() { slide('next'); }, config.auto); }); 

Any help would be greatly appreciated, as it puzzled me.

Answer 1

Using true as the value is the problem of invoking a false boolean or int from the init function.

EDIT 4: http://jsfiddle.net/6r6sC/44/

in slide (), added startAuto ()

 if(config.auto!=false) { startAuto(); } 

EDIT3: Fixed a problem with multiple timers, and two functions were created to handle the automatic start / stop slider.

The solution is here: http://jsfiddle.net/6r6sC/41/

 var cachedAuto = config.auto; var timer = ""; var startAuto = function() { config.auto = cachedAuto; clearTimeout(timer); timer = setTimeout(function() { slide('next'); }, config.auto); } var stopAuto = function() { clearTimeout(timer); config.auto = false; } if(config.auto!=false) { // start auto sliding startAuto(); // pause/start on mouse events $(this).on("mouseenter", function(event){ stopAuto(); }).on("mouseleave", function(event){ startAuto(); }); } 

Answer 2

Ok, I did a bit of research and testing and replaced “mouseleave” with “mouseout”, it works! So try this one.

  // hover stop if(config.auto!=true) $(this).mouseenter(function() { config.auto=false; }).mouseout( function() { config.auto=true; });