CODEWITHSUNDEEP
jqueryfadeout
Gab
Gab

Reputation: 2276

trying to make some divs fadeOut and then be removed

I'm trying to make some divs fadeOut and then be removed.

$("article.articles .thumb a").click(function() {
    $(this).parent().parent().addClass("selected");
    $("article.post").not(".selected").fadeOut(500).delay(1500).remove();
    $('#stream').isotope('reLayout');
});

But the divs are removed right away without fading.

What am I doing wrong?

Upvotes: 2

Views: 435

Answers (3)

Ram
Ram

Reputation: 144689

you can use fadeOut() callback function which is executed after fade effect is complete.

.fadeOut( [duration] [, callback] )

$("article.post").not(".selected").fadeOut(500, function(){
   $(this).remove();
})

or:

$("article.post").not(".selected").fadeOut(500).delay(2000).queue(function(){
   $(this).remove()
})

Upvotes: 1

GTSouza
GTSouza

Reputation: 365

$("article.articles .thumb a").click(function() {
    $(this).parent().parent().addClass("selected");
    $("article.post").not(".selected").fadeOut(500, function(){
    setTimeout(function(item){ 
      jQuery(item).remove(); }, 1500, $(this));
});
    $('#stream').isotope('reLayout');
});

Upvotes: 0

pyrometer
pyrometer

Reputation: 881

You are not waiting for the div to fade out before removing it. You need to create a callback function and call remove inside it.

Use this Snippet-

   $("article.post").not(".selected").fadeOut(500, function(){
                            $("article.post").not(".selected").remove();
                        });

Upvotes: 0

Related Questions