jQuery: FadeOut then SlideUp

Question

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 1

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.

Answer 2

jQuery.fn.fadeThenSlideToggle = function(speed, easing, callback) {
  if (this.is(":hidden")) {
    return this.slideDown(speed, easing).fadeTo(speed, 1, easing, callback);
  } else {
    return this.fadeTo(speed, 0, easing).slideUp(speed, easing, callback);
  }
};

I tested it on JQuery 1.3.2, and it does work.

Edit: This is the code I called it from. #slide-then-fade is the ID of a button element, article-text is a class on a div tag:

$(document).ready(function() {
  $('#slide-then-fade').click(function() {
    $('.article-text').fadeThenSlideToggle();
  });
});

Edit 2: Modified to use the built-in slideUp.

Edit 3: Rewritten as a toggle, and using fadeTo

Answer 3

Can't you chain it?

$('myelement').fadeOut().slideUp();

EDIT:

Maybe this will help instead?

Answer 4

$("#id").fadeIn(500, function () {

    $("#id2").slideUp(500).delay(800).fadeOut(400);

});

Answer 5

Try $('.row').animate({ height: 'toggle', opacity: 'toggle' }, 'slow').slideUp();

demo Here