jQuery: FadeOut then SlideUp

fadeout, jquery, slideup

Solution

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

Problem

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()`?

Original source