jQueryUI: высота анимации родительского элемента в дочерней анимации

Question

Когда я скрываю дочерний элемент с помощью анимации jQuery UI .hide('slide', {direction:'up'}), я также хотел бы анимировать высоту его родителя.

Здесь это пример того, что у меня есть. Анимация выглядит не очень хорошо, потому что высота родителя изменяется сразу после того, как его дочерний элемент скрыт, а не в процессе, как в анимации jQuery .slideUp().

Answer 1

ОБНОВЛЕНИЕ: некоторые настройки :) Проверено: http://jsfiddle.net/inti/BG4Hk/16/

Попробуйте что-то вроде этого:

var original_height = 0;

$('#child').click(function() {
    if (!original_height) {
        original_height = $(this).height();
    }
    $(this).stop().animate({'height': 0}, 1000, function() { $(this).hide(); });
});

$('#content').click(function() {
    if (original_height) {
        $('#child').stop().show().animate({'height': original_height}, 1000);
    }
});

Требуется немного больше работы, чтобы справитьсязаканчивается, но это начало.

Answer 2

Я быстро изменил ваш CSS следующим образом, и он выглядит довольно хорошо. Немного дурачиться, и это должно выглядеть точно так, как вы хотите.

#container{
    width:100px;
    padding:10px;
    text-align:center;
    height:auto;
}

#child{
    background-color:blue;
    border:10px solid #red;
    border-top:0px;
}

#content{
    background-color:red;
}