JQuery animation callbacks don't run sequentially

Question

var slideWidth = $('#carousel #slideContainer .slide').width(); var slidePos = (($('ul#carousel_nav li').index(this)) * slideWidth); slidePos = Math.abs(slidePos) * -1; $('#carousel #slideContainer .slide .slideContents').stop(); $('#carousel #slideContainer').stop(); $('#carousel #slideContainer .slide .slideContents').fadeOut( 500, function() { $('#carousel #slideContainer').animate({ left: slidePos }, 1000, function() { $('#carousel #slideContainer .slide .slideContents').fadeIn( 500 ); }); }); 

Creating a jQuery scroller that has a chain of animations / callbacks. When you click div '#carousel #slideContainer .slide .slideContents should disappear and its container div '#carousel #slideContainer .slide .slideContents moves n pixels (slidePos)

when the exectued animation callbacks don't always fire at the end of the previous animation and the whole sequence becomes unbound ?!

Answer 1

It seems to me that Pete said it works

 var slideWidth = $('#carousel #slideContainer .slide').width(); var slidePos = (($('ul#carousel_nav li').index(this)) * slideWidth); slidePos = Math.abs(slidePos) * -1; $('#carousel #slideContainer .slide .slideContents').stop(true); $('#carousel #slideContainer').stop(true); $('#carousel #slideContainer .slide .slideContents').fadeOut( 500, function() { $('#carousel #slideContainer').animate({ left: slidePos }, 1000, function() { $('#carousel #slideContainer .slide .slideContents').fadeIn( 500 ); }); });