CODEWITHSUNDEEP
javascriptjquery
Jeremy Talus
Jeremy Talus

Reputation: 125

call a function after all fadeOut

I want to detect when all my fadeOut are finished

My fadeOut are on random duration, on all item of an container. after each fadeOut I remove item, to put a new one after all item fadeOut. This new Item are hiden, waiting to fadeIn

function fadeOutItem(){ 
$('div.wrapper').children('.item-box').each(function(){
    $(this).fadeOut(Math.floor(Math.random() * 1300) + 200, function(){
        $(this)[0].remove();
    });
});
}

Upvotes: 1

Views: 117

Answers (3)

cracker
cracker

Reputation: 4906

Try to Use $(this).remove(); instead of $(this)[0].remove(); and Follow The Link For More Details

Upvotes: 0

Praveen
Praveen

Reputation: 56511

You can add a if conditional statement to look for total elements like below

function fadeOutItem(){ 
$('div.wrapper').children('.item-box').each(function(i){
    $(this).fadeOut(Math.floor(Math.random() * 1300) + 200, function(){
        $(this)[0].remove();        
    });
    // Check for the instance and then add it
    if (i === $('div.wrapper').children('.item-box').length) {
                //At the last element add your elements
        }
});
}

Upvotes: 0

UweB
UweB

Reputation: 4110

Basically, you need to know when your wrapper doesn't contain any children anymore. You could do that in the callback function of the fadeOut itself:

function fadeOutItem(){ 
    $('div.wrapper').children('.item-box').each(function(){
        $(this).fadeOut(Math.floor(Math.random() * 1300) + 200, function(){
            $(this).remove();
            if ($('div.wrapper').children('.item-box').length === 0) {
                // add new item
            }
        });
    });
}

Upvotes: 1

Related Questions