Thursday, January 12, 2012

jQuery setTimeout issue


I have a simple function that animates a bunch of images by crossfading them. A simple banner rotation. I set up the function so that calling animateSlideshow("play") it should set the timeout and start animating and by calling animateSlideshow("stop") it should stop.



When I call stop, however, the animation happens one more time. What is the cause for this one extra animation and how can I deal with it?




function animateSlideshow(action){

if(action === "play"){
$(activeSlide).data('animateSlideshow',
setTimeout(function(){

if( $(actvImg).index() === total - 1 ){
$(actvImg).fadeOut(animationSpeed).removeClass("actvImg").siblings().eq(0).fadeIn(animationSpeed).addClass("actvImg");
}else{
$(actvImg).fadeOut(animationSpeed).removeClass("actvImg").next().fadeIn(animationSpeed).addClass("actvImg");
}

actvImg = $(".rightSlides li.active .rightSlide > li.actvImg");
actvImgIndx = $(actvImg).index();
updateBreadcrumbs();
animateSlideshow("play")

}, animationTimeout)
);
}else{
clearTimeout($(activeSlide).data('animateSlideshow'));
};

};

No comments:

Post a Comment