Javascript slider slides like crazy after a while

Question

If I leave this slider for a while on the site, it will start to slide like crazy. How to check this error? Open bellated.com/vyrai (testing page). You can see large shift photos. Leave it for a moment. or two, and look at other browser tabs, and when you return to this site, you will see an error with a slider. any ideas how to fix this?

I am using this script:

<script type="text/javascript"> $(document).ready(function() { var currentPosition = 0; var slideWidth = 673; var slides = $('.slide'); var numberOfSlides = slides.length; var slideShowInterval; var speed = 6000; //Assign a timer, so it will run periodically slideShowInterval = setInterval(changePosition, speed); slides.wrapAll('<div id="slidesHolder"></div>') slides.css({ 'float' : 'left' }); //set #slidesHolder width equal to the total width of all the slides $('#slidesHolder').css('width', slideWidth * numberOfSlides); manageNav(currentPosition); //tell the buttons what to do when clicked $('.nav').bind('click', function() { //determine new position currentPosition = ($(this).attr('id')=='rightNav') ? currentPosition+1 : currentPosition-1; //hide/show controls manageNav(currentPosition); clearInterval(slideShowInterval); slideShowInterval = setInterval(changePosition, speed); moveSlide(); }); function manageNav(position) { //hide left arrow if position is first slide if(position==0){ $('#leftNav').hide() } else { $('#leftNav').show() } //hide right arrow is slide position is last slide if(position==numberOfSlides-1){ $('#rightNav').hide() } else { $('#rightNav').show() } } //changePosition: this is called when the slide is moved by the timer and NOT when the next or previous buttons are clicked function changePosition() { if(currentPosition == numberOfSlides - 1) { currentPosition = 0; manageNav(currentPosition); } else { currentPosition++; manageNav(currentPosition); } moveSlide(); } //moveSlide: this function moves the slide function moveSlide() { $('#slidesHolder').animate({'marginLeft' : slideWidth*(-currentPosition)}); } }); </script> 

Implementation example

html:

 <div id="slideshow"> <div id="slideshowWindow"> <div class="slide"><div class="slideText"> <h2 class="slideTitle">Pas mus kainos visada lanks&#269;ios!</h2> <p class="slideDes">"Tik pas mus &#303;sigykite savo nauj&#261;j&#261; vandens filtravimo sistem&#261; palankiausiomis kainomis".</p> <p class="slideLink"><a href="http://jayreillyportraits.com"></a></p> </div><!--/slideText--> </div><!--/slide--> <div class="slide"><div class="slideText"> <h2 class="slideTitle">Naujas prekybos salonas</h2> <p class="slideDes">"Aplankykite mus naujai atsidariusiame prekybos salone &#352;ilal&#279;je S. Dariaus ir S. Gir&#279;no g. 24".</p> <p class="slideLink"><a href="http://jayreillyportraits.com"></a></p> </div><!--/slideText--> </div><!--/slide--> <div class="slide"><div class="slideText"> <h2 class="slideTitle">Ie&#353;kote galimybi&#371; partneriaujant?</h2> <p class="slideDes">"Susisiekite su mumis ir mes aptarsime abiem pus&#279;ms palankias s&#261;lygas!".</p> <p class="slideLink"><a href="http://jayreillyportraits.com"></a></p> </div><!--/slideText--> </div><!--/slide--> <div class="slide"><div class="slideText"> <h2 class="slideTitle">Turite klausim&#371;?</h2> <p class="slideDes">"Susisiekite su mumis ir m&#363;s&#371; specialistai pasistengs atsakyti &#303; kiekvien&#261; j&#363;s&#371; u&#382;klaus&#261;.".</p> <p class="slideLink"><a href="http://jayreillyportraits.com"></a></p> </div><!--/slideText--> </div><!--/slide--> </div></div> 

Answer 1

This problem has several reasons that all work together in a perfect storm:

• You put the next slides based solely on the timer, when you should queue up the callback of the previous slide animation,
• You are using a browser that supports requestAnimationFrame, and
• You are using jQuery 1.6.2, which includes support for requestAnimationFrame.

When you move away from the tab in which the slider works, a browser with support for requestAnimationFrame will stop all animations running on this tab. However, timers will continue to work! When you return to the page, all the queues in the queue are waiting immediately, which gives you this fleeing effect.

To fix this, the easiest solution would be to switch to jQuery 1.7.1, as they refused support for requestAnimationFrame () due to inconsistent browser support. But in the end they will return it, so you really need to fix your code.

To fix your code, you must queue a new slide animation in the callback of the previous slide .animate() . This ensures that you do not become blind, even if the animation is not running.

Let me know if you need more clarification. tl; dr: Change this:

  <script src="js/jquery-1.6.1.min.js" type="text/javascript"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script> 

For this:

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 

The jQuery error on this issue has additional information: http://bugs.jquery.com/ticket/9381