CODEWITHSUNDEEP
javascriptjquerycallbackjquery-animate
JAC83
JAC83

Reputation: 43

jQuery animation callbacks not firing in sequence

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 );
        });
    });

Building a jQuery scroller that has a chain of animations / callbacks. When a button is clicked the div '#carousel #slideContainer .slide .slideContents should fade out and its container div '#carousel #slideContainer .slide .slideContents moves n pixels (slidePos)

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

Upvotes: 4

Views: 289

Answers (1)

Joe Johnston
Joe Johnston

Reputation: 2936

Looks to me like what pitaj said 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 );
    });
});

Upvotes: 1

Related Questions