Question

I have got the jquery cycle plugin and have been asked to pause it on mouse hover. Unfortunately, I have a transparent image hovering over the entire slideshow (it’s a link – click anywhere on slideshow and off you go somewhere else) so I have set up the following code:

  jQuery("#holder").mouseenter(
    function(){
      jQuery("ul.cycle").cycle("pause");
    }
  ).mouseleave(
    function(){
      jQuery("ul.cycle").cycle("resume");
    }
  );

While this works if I am hovering for a short moment, if I hover for more than the timeout period specified in my constructor then the system does not restart.

I have browsed SO and came across this post:

The reason why this problem has been occuring was that next iteration
where transition suppose to occure was setup before completion of
previous transition. In some cases, next transition was fired before
the previous has finished, at the beginning of that new transition
there’s a check whenever there’s already other animation going on – if
so, the function would just return and stop (without setting up next
iteration). After the ongoing animation was finished, the slideshow
was stopped, because there was no next transition scheduled.

How do I get cycle to restart the timer for the current slide after I have used ‘pause’?

Answer 1

I have used the fix supplied by @WTK at github: https://github.com/WTK/cycle