CODEWITHSUNDEEP
javascriptjquery
user1469270
user1469270

Reputation:

Fading in with jQuery creating a queue

I'm trying to create a simple sequence: find first element, hide its siblings and then fade it in. I have this sort of working; however, it does not wait for its siblings to fade out first:

var $firstCaption = $('.caption').first();

$firstCaption.appendTo('.caption-content').siblings('.caption').fadeOut(function(){
     $firstCaption.fadeIn(); // this is not waiting
});

I could use a delay, but I think that's quite a messy solution? Is there another method?

JSFIDDLE:

http://jsfiddle.net/tmyie/8VjLD/

Upvotes: 0

Views: 41

Answers (1)

A. Wolff
A. Wolff

Reputation: 74420

You could use a promise:

DEMO jsFiddle

$('a').click(function () {
    var $firstCaption = $('.caption').first();
    $firstCaption.appendTo('.caption-content').siblings('.caption').fadeOut().promise().done(function () {
        $firstCaption.fadeIn();
    });
});

BTW, you could wish to use .finish() here if button clicked multiple times in a row:

DEMO with finish

$firstCaption.appendTo('.caption-content').siblings('.caption').finish()...

Upvotes: 5

Related Questions