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

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. — Rupert Madden-Abbott, Jul 13 '11 at 07:40

Russ Cam · Answer 1 · 2011-02-09T08:46:28.520

54

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.

edited Feb 09 '11 at 08:46

answered Apr 09 '09 at 15:55

Russ Cam

124,184
33
204
266

nice demo, wish more folks would do it. – redsquare Apr 09 '09 at 16:54
2

Wish stackoverflow would provide a sandbox – Nick Berardi Apr 09 '09 at 17:15
Thanks. I discovered jsbin here on stackoverflow and have been using it since to provide workable demos in answers - http://jsbin.com – Russ Cam Apr 09 '09 at 17:50
seems unnecessary to use 0.01. this works fine with 0 without changing your version of jQuery (at least in Chrome) http://jsbin.com/avebe/16/edit – Simon_Weaver Feb 09 '11 at 02:41
@Simon - and in Firefox 3.6.13 and in IE8 too. It does seem uneccessary, will update answer. – Russ Cam Feb 09 '11 at 08:43
@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!) – Russ Cam Feb 10 '11 at 13:11

Powerlord · Accepted Answer · 2009-04-09T16:08:55.177

41

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

edited Apr 09 '09 at 16:08

answered Apr 09 '09 at 15:31

Powerlord

87,612
17
125
175

I had to drop the 'easing' parameter in order to get the 'callback' to work. – bart Apr 09 '09 at 19:27
Ah, OK. As I recall, the slides and fades have different arguments for easing, so the easing argument was useless anyway. – Powerlord Apr 10 '09 at 13:14
1

Is it possible to make this nested? I tried this > http://jsfiddle.net/59CQf/2/ but it doesn't work – deathlock Apr 15 '12 at 10:28

score 1 · Answer 3 · edited Jul 04 '12 at 18:07

1

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

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

});

edited Jul 04 '12 at 18:07

Bo Persson

90,663
31
146
203

answered Jul 04 '12 at 18:02

albert

11
1

score 1 · Answer 4 · answered Sep 18 '15 at 09:17

1

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

demo Here

answered Sep 18 '15 at 09:17

Nithee

300
1
12

Kieran Senior · Answer 5 · 2009-04-09T14:59:55.463

1

Can't you chain it?

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

EDIT:

Maybe this will help instead?

edited Apr 09 '09 at 14:59

answered Apr 09 '09 at 14:48

Kieran Senior

17,960
26
94
138

No it fades to nothing and then does a hard move on the DOM element. – Nick Berardi Apr 09 '09 at 14:54
No, it jumps up at the end of the fadeOut(). – bart Apr 09 '09 at 14:56
Your link shows how to fadeOut and SlideUp at the same time. I would slideUp after fadeOut has ended. – bart Apr 09 '09 at 15:02

Ian Oxley · Answer 6 · 2009-04-09T18:53:44.423

-1

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

edited Apr 09 '09 at 18:53

answered Apr 09 '09 at 15:02

Ian Oxley

10,916
6
42
49

it doesn't work because you esentially did the same thing as chaining. you need to fade to 1% first and then roll up – Nick Berardi Apr 09 '09 at 17:14
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. – Ian Oxley Apr 09 '09 at 18:56
1

@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. – Ian Oxley Apr 09 '09 at 19:23

jQuery: FadeOut then SlideUp

6 Answers6

Linked