How to apply transition on div movement when upper disappears?

Question

I remove a div element using jquery 'fadeOut()', the problem is: when I remove an element, the other elements under this go up without transition and seems too abrupt. Don't know how to solve it. If I put transition on css into the class .publication the jQuery's fadeOut() stops working properly and remove the elements abrupt too.

How can I do this?

EDIT: And sorry for bad english...

EDIT2: Here's the Jsfiddle with my problem:

jsfiddle code

http://jsfiddle.net/zberQ/

Answer 1

Hey you can use opacity:0; and then slideUp() which gives the desired effect....

Please see the following JSFiddle.

Answer 2

You can use slideUp().

You can also use hide(500) but I personally prefer the slideUp(500) effect.

$('#yourelement').slideUp(500);

It should animate all the rest of the elements as well.

Per your comments, you can also use .animate() to create any custom animation you want:

.animate({'height':'0','opacity':'0'});//in your specific case - $(this).parent().parent().animate({'height':'0','opacity':'0'});

or even create a squence of animation using delay():

.animate({'opacity':'0.2'}).delay(50).animate({'height':'0','opacity':'0'});

The problem you are experiencing is the result of the fadeOut() behavior. fadeOut() animates the opacity to 0 and then when it reaches 0 it sets the display:none;, making all elements jump up, down to fill out the empty space. From jQuery documentation:

The .fadeOut() method animates the opacity of the matched elements. Once the opacity reaches 0, the display style property is set to none, so the element no longer affects the layout of the page.

slideUp() animates the height first, causing a smooth disappearnce, than sets display:none;. Taken from jQuery documentation:

The .slideUp() method animates the height of the matched elements. This causes lower parts of the page to slide up, appearing to conceal the items. Once the height reaches 0 (or, if set, to whatever the CSS min-height property is), the display style property is set to none to ensure that the element no longer affects the layout of the page.

JSFiddle

Hope this helps!