Question

I need help with auto slider animation.So, my question is – how to stop animation on hover event, but not immediately, rather when animation on the separate element is completely finished.

I have this piece of code:

$(function(){

   var current_slide=1;
   var set_time=2500;

   $('span').css({top:'300px'});

   $.timer(6000,function(timer){
      switch(current_slide){
         case 1:
            $('span').css({top:'350px'});
            $('#slideshow').stop().animate({left:'-960px',top:'0px'},{easing:'easeOutBack',duration:set_time});
            current_slide=2;
            $('span').delay(2500).animate({top:'300px'});
            break;
         case 2:
            $('span').css({top:'350px'});
            $('#slideshow').stop().animate({left:'-1920px',top:'0px'},{easing:'easeOutBack',duration:set_time});
            current_slide=3;
            $('span').delay(2500).animate({top:'300px'});
            break;
         case 3:
            $('span').css({top:'350px'});
            $('#slideshow').stop().animate({left:'-2880px',top:'0px'},{easing:'easeOutBack',duration:set_time});
            current_slide=4;
             $('span').delay(2500).animate({top:'300px'});
            break;

         case 4:
            $('span').css({top:'350px'});
            $('#slideshow').stop().animate({left:'0px',top:'0px'},{easing:'easeOutExpo',duration:set_time});
            current_slide=1;
            $('span').delay(2500).animate({top:'300px'});
            break;
      }

      timer.reset(12000);
   });

   $("#slideshow").hover(function(){
      $(this).stop(true,true);
   });
});

The trouble is when I hover over the slider, then the animation stopped(jumping to the end) hardly,abruptly and ugly.May be I should use queue before .stop(), or something like this.
Here is good example: http://www.sevtopolishotel.com/
Tnx in advance!

Answer 1

You could track hover state like this:

var isHovered = false;
$("#slideshow").hover(function(e){
    isHovered = e.type == 'mouseenter';
});

From there, it would be possible to wrap your entire switch in if(!isHovered) { ... }, which would mean that as long as the slideshow is hovered, the timer would skip immediately to just setting the next timeout.