CODEWITHSUNDEEP
jquerycss
Homme Sauvage
Homme Sauvage

Reputation: 1916

How to fadeOut() element while animate() another one on top of it?

I have a list of elements with a remove button on each element, I'm trying to make the remove button fadeOut the element while the siblings move to top. The problem is that when I click on remove the elemenent in question fades out but the siblings don't move, they just change position without animation. How can I make them move up while the element above is fading out. Here's the jsfiddle: http://jsfiddle.net/4c82H/

Here's the code:

$('div').click(function() {
    $element = $(this);    
    var height = $element.height();
    $element.fadeOut(400);
    $element.next().animate({top:'-=' + height + 'px'});
});

Thank you!

EDIT: Some are proposing slideUp, thank you for this, it works, but is there a way to fade the element while others are sliding?

$element.fadeOut();
$element.slideUp();

Does not work.

Upvotes: 0

Views: 469

Answers (2)

A. Wolff
A. Wolff

Reputation: 74420

As suggested by Neta, you should use slideUp() instead:

http://jsfiddle.net/4c82H/3/

$('div').click(function() {
    $(this).slideUp();
});

Upvotes: 1

Tim Wasson
Tim Wasson

Reputation: 3656

slideUp will do it. I've attached a sample here. http://jsfiddle.net/4c82H/1/

Upvotes: 4

Related Questions