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

Unprincipled

I rewrote mine so it's a toggle now. – Tearoom

It should be noted that the reason fadeOut causes a jump is that after the opacity is animated to 0, the display is set to none. fadeTo doesn't do this which is why the below solutions work. – Quartered

Answer 1

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

Tearoom

I had to drop the 'easing' parameter in order to get the 'callback' to work. – Unprincipled

Ah, OK. As I recall, the slides and fades have different arguments for easing, so the easing argument was useless anyway. – Tearoom

Is it possible to make this nested? I tried this > jsfiddle.net/59CQf/2 but it doesn't work – Anchoveta

Answer 2

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.

Sponger

nice demo, wish more folks would do it. – Lubow

Wish stackoverflow would provide a sandbox – Hyder

Thanks. I discovered jsbin here on stackoverflow and have been using it since to provide workable demos in answers - jsbin.com – Sponger

seems unnecessary to use 0.01. this works fine with 0 without changing your version of jQuery (at least in Chrome) jsbin.com/avebe/16/edit – Longstanding

@Simon - and in Firefox 3.6.13 and in IE8 too. It does seem uneccessary, will update answer. – Sponger

@Simon - yes, that does seem to be the case (I think I must have made the assumption that fadeTo also ended in hiding the element, hence the original 0.01 value for opacity - learn something new everyday!) – Sponger

Answer 3

Can't you chain it?

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

EDIT:

Maybe this will help instead?

Baywood

No it fades to nothing and then does a hard move on the DOM element. – Hyder

No, it jumps up at the end of the fadeOut(). – Unprincipled

Your link shows how to fadeOut and SlideUp at the same time. I would slideUp after fadeOut has ended. – Unprincipled

Answer 4

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

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

});

Spruik

Answer 5

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

demo Here

Tomahawk

Answer 6

The fadeOut function takes a second optional argument of a callback function, so you should be able to do something like this:

$('elementAbove').fadeOut(500, function() {
    $('elementBelow').slideUp();
});

EDIT: forgot to add the speed of the fadeOut as the first parameter

Cordless

it doesn't work because you esentially did the same thing as chaining. you need to fade to 1% first and then roll up – Hyder

I'd disagree that this is the same thing as chaining: with chaining you could end up with both animations firing simultaneously due to the way timeouts; using a callback for the slideUp() should in theory ensure that it fires only after fadeOut has finished executing. – Cordless

@Nick Berardi: I see what you mean about fading to 1% - I've just tried a quick demo and using fadeTo(speed, 0.1, callback) seems to do the trick. – Cordless