CODEWITHSUNDEEP
jquery
brunodd
brunodd

Reputation: 2584

div fade out and next div slideUp

There are 3 divs with a button that makes current div fade out.

How to slideUp the next div bellow after current div is faded out?

jsFiddle

$(".btn-disapear").click(function() {
    $(this).closest(".panel").fadeOut(400);
    $(".this-message").delay( 400 ).fadeIn(400).delay(900).fadeOut(400);
    $(this).parent().next(".panel").slideUp(2000);
});

Upvotes: 1

Views: 67

Answers (2)

Truezplaya
Truezplaya

Reputation: 1313

You should use the 

.fadeOut( "slow", function() { 
    //slide up in here
};

Hope this helps

For completeness 

$(".btn-disapear").click(function() {
    $(this).closest(".panel").fadeOut(400, function(){
        $(".this-message").fadeIn(400).delay(900).fadeOut(400, function(){
            $(this).parent().next(".panel").slideUp(2000);
        });  
    });  
});

Truez

Upvotes: 3

D4V1D
D4V1D

Reputation: 5849

Use .animate() and .slideUp() callback functions:

$(".btn-disapear").click(function() {

    $(this).closest(".panel").animate({opacity: 0}, 500).slideUp(2000, function() {
        $(".this-message").fadeIn(400, function() {
            $(this).delay(900).fadeOut(400);
        });

    });

});

Working JSFiddle

Upvotes: 1

Related Questions