Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Fade out and slide up at the same time?

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.

like image 893
oshirowanen Avatar asked Jul 21 '11 09:07

oshirowanen


3 Answers

$(that)
    .parents(".portlet")
    .animate({height: 0, opacity: 0}, 'slow', function() {
        $(this).remove();
    });
like image 160
Shef Avatar answered Nov 18 '22 20:11

Shef


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/

like image 4
beardhatcode Avatar answered Nov 18 '22 19:11

beardhatcode


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

like image 1
andyb Avatar answered Nov 18 '22 19:11

andyb