Как применить переход при движении div, когда верхнее исчезнет?

Question

Я удаляю элемент div с помощью jquery 'fadeOut()', проблема в том, что когда я удаляю элемент, другие элементы под ним идут без перехода и кажутся слишком резкими. Не знаю, как его решить. Если я поставлю переход на css в класс .публикация, fadeOut() перестанет работать корректно и удалит элементы круто.

Как я могу это сделать?

EDIT: А жаль плохой английский ...

EDIT2: Вот Jsfiddle с моей проблемой:

jsfiddle code 

http://jsfiddle.net/zberQ/

Answer 1

Эй вы можете использовать opacity:0; и затем slideUp(), которая дает желаемый эффект ....

Пожалуйста, обратитесь к следующей JSFiddle.

Answer 2

Вы можете использовать slideUp().

Вы также можете использовать hide(500), но лично я предпочитаю эффект slideUp(500).

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

Он должен оживить все остальные элементы, а также.

За ваши комментарии, вы также можете использовать .animate() для создания любой пользовательской анимации вы хотите:

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

или даже создать squence анимации с использованием delay():

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

Проблема вам являются результатом поведения fadeOut(). fadeOut() оживляет непрозрачность до 0, а затем, когда он достигает 0, он устанавливает display:none;, заставляя все элементы прыгать вверх, чтобы заполнить пустое пространство. Из документации по jQuery:

Метод .fadeOut() анимирует непрозрачность согласованных элементов. Как только непрозрачность достигает 0, свойство стиля отображения равно none, , чтобы элемент больше не влиял на макет страницы.

slideUp() анимирует высоту сначала, вызывая плавное исчезновение, чем устанавливает отображение: none ;. Взято из документации jQuery:

Метод .slideUp() анимирует высоту согласованных элементов. Это приводит к тому, что нижние части страницы скользят вверх, появляясь, чтобы скрыть пункты . Как только высота достигнет 0 (или, если установлено, независимо от свойства min-height CSS), свойство стиля отображения установлено равным none , убедитесь, что элемент больше не влияет на макет страницы.

JSFiddle

Надеется, что это помогает!