jQuery: FadeOut then SlideUp

jquery fadeout slideup
bart picture bart · Apr 9, 2009 · Viewed 40.8k times · Source

If an item is being deleted then I would like to fade it out and slide the other elements up to fill the empty space. Now, when I use fadeOut() the item doesn't have a height at the end which results in the other items jumping up (instead of sliding up nicely).

How can I slideUp() and element right after fadeOut()?

Answer

Russ Cam picture Russ Cam · Apr 9, 2009

Sounds like it would be better to use the jQuery fadeTo command

 $(function() {

     $("#myButton").click(function() {
         $("#myDiv").fadeTo("slow", 0.00, function(){ //fade
             $(this).slideUp("slow", function() { //slide up
                 $(this).remove(); //then remove from the DOM
             });
         });

     });

});

Working Demo here.

By performing each command in the callback function of the preceding command, the command will not run until the previous one completes; a "jump" occurs when the element is removed from the DOM without waiting for the slideUp to complete.

Related questions

How to hide a div after some time period?

I need to hide a div (like "mail sent successful" in Gmail) after a certain time period when I reload the page. How can I do that?

Read More
jQuery fade out then fade in

There's a bunch on this topic, but I havn't found an instance that applies well to my situation. Fade a picture out and then fade another picture in. Instead, I'm running into an issue where the first fades out and …

Read More
jQuery add/remove Class with fadeIn/Out

I would to apply a fadeIn effect to a addClass function..and fadeOut to removeClass... Can you help me? This is my code $('#loader'+idTurno).addClass('loader'); ... $('#loader'+idTurno).removeClass('loader');

Read More