Question

I have defined a function to animate 7 divs to the top. I tried to using stop(true, false) function to stop all the element. and restart the animation by calling the function again. please see the code below. the problem is the animation became very slow after I call the function to restart the animation. it slows for a few seconds and become normal speed again. does anyone know the reason. please help!!! Thanks

my code is attach below

autoAnimate(5000);
$('#scroller_container').mouseenter(function(){
    $('#scroller .galleryThumb').stop(true, false);
});
$('#scroller_container').mouseleave(function(){
    autoAnimate(5000);
});

function autoAnimate(speed) {
    $('#scroller .galleryThumb:eq(0)')
        .animate({'top':'-122px'},speed,'linear',function(){
          if(!autoFlag) {
            index       = $('#scroller .galleryThumb:last').attr('id');
            index       = index.substr(5, index.length);
            index       = parseInt(index);
            index       = index + 1;
            autoFlag    = true;
          }
          if(index == numberOfAds) { index = 0; }

          $('#scroller .galleryThumb:eq(0)').remove();
          $('#scroller').append(adUnitContainer[index]);
          $('#scroller .galleryThumb:eq(6)').css('top','732px');
          index++;
          autoAnimate(speed);
    });
    $('#scroller .galleryThumb:eq(1)').animate({'top':'0px'},speed,'linear');
    $('#scroller .galleryThumb:eq(2)').animate({'top':'122px'},speed,'linear');
    $('#scroller .galleryThumb:eq(3)').animate({'top':'244px'},speed,'linear');
    $('#scroller .galleryThumb:eq(4)').animate({'top':'366px'},speed,'linear');
    $('#scroller .galleryThumb:eq(5)').animate({'top':'488px'},speed,'linear');
    $('#scroller .galleryThumb:eq(6)').animate({'top':'610px'},speed,'linear');
}

Answer 1

If you have a 5 second animation and you stop it in the middle and then you restart the same animation with the same final point for the animation and you tell it to run for 5 seconds, it will go slower because it has less distance to go in the 5 seconds.

If you want it to restart with the same speed it had before, then you have to reduce the amount of time in the second animation to reflect a pro-rated amount of time.

Remember speed = distance / time. If your restarted animation has a shorter distance to travel but the same time, it’s going be a slower speed unless you also reduce the time proportionally.