Fade out and slide up at the same time?

Question

I have the following script which works well:

$(that).parents(".portlet").fadeOut('slow', function() {
    $(that).parents(".portlet").remove();
});

It just fades out the element, then removes it totally from the screen.

I want to slightly improve the effect by sliding it up while it is fading out. How would I do that?

Just to clarify, I don't want it to fade out THEN slide up, or slide up THEN fade out, I would like it to fade out, AND at the same time while it is fading out, I would like it to slide up.

possible duplicate of [fadeOut() and slideUp() at the same time?](http://stackoverflow.com/questions/2387515/fadeout-and-slideup-at-the-same-time) — Factor Mystic, Nov 06 '13 at 17:25

score 17 · Accepted Answer · answered Jul 21 '11 at 10:00

17

$(that)
    .parents(".portlet")
    .animate({height: 0, opacity: 0}, 'slow', function() {
        $(this).remove();
    });

answered Jul 21 '11 at 10:00

Shef

41,793
15
74
88

1

Dang, I'm too slow doing a jsfiddle :( ... Well, [here's the demo](http://jsfiddle.net/Chouchen/p5AuB/) – Shikiryu Jul 21 '11 at 10:03

score 4 · Answer 2 · answered Jul 21 '11 at 10:01

4

what about:

$('#clickme').click(function() {
  $('#book').animate({
    opacity: 0,
    height: '0'
  }, 5000, function() {
    // Animation complete.
  });
});

will go to opacque 0 and height 0.

Learn more here: http://api.jquery.com/animate/

answered Jul 21 '11 at 10:01

beardhatcode

3,895
1
13
27

score 1 · Answer 3 · answered Oct 21 '13 at 09:43

To avoid jumping-effect do not forget about the padding & margin. The jQuery-Team does not use property 0. Instead they are using the values 'hide' & 'show'. e.g.

    $('#elementId').animate({
            opacity: 'hide',      // animate slideUp
            margin: 'hide',
            padding: 'hide',
            height: 'hide'        // animate fadeOut
        }, 'slow', 'linear', function() {
            $(this).remove(); 
        });

score 1 · Answer 4 · answered Jul 21 '11 at 10:05

1

With jQuery .animate(), you can manipulate many properties at once - see demo

answered Jul 21 '11 at 10:05

andyb

42,062
11
113
146

score 0 · Answer 5 · answered Jul 21 '11 at 10:01

0

you can use .animate function of jquery

you can set as many animations as you want.

pass opacity as the parameter & also slideUp as the parameter

api.jquery.com/animate/

answered Jul 21 '11 at 10:01

Gaurav Shah

4,935
6
38
69

score 0 · Answer 6 · answered Jul 21 '11 at 10:02

0

You can use .animate().

$(that).parents(".portlet").animate({
    opacity: 0,
    height: 0
}, 'slow', 'linear', function() {
    $(that).parents(".portlet").remove();
});

answered Jul 21 '11 at 10:02

Ribose

2,153
14
22

Fade out and slide up at the same time?

6 Answers6