DIV анимация, скользящий выпуск

Question

http://jsfiddle.net/fVKDy/11/

Я надеюсь исправить эту анимацию, если это возможно. Первая часть работает отлично, DIV скользит влево, чтобы раскрыть больше контента, а DIV внизу скользит вверх. Обратного нет, потому что содержимое DIV не отображается должным образом, а нижнее значение DIV не скользит вниз.

Любая помощь приветствуется.

Это продолжение этого обсуждения со вчерашнего дня Автоматическое оживление DIV

     $(function() {
$(".left_slide").click(function() {
    $("#inner_container").stop(true, true).animate({ left: -400 }, 500, function(){
        $(".block1").stop(true, true).animate({height: "1px"},1000);
    })
});
});
$(function() {    
$(".right_slide").click(function() {
    $("#inner_container").stop(true, true).animate({ left: 0 }, 500, function(){
        $(".block1").stop(true, true).animate({height: "1px"},1000);
    })
});
});

CSS

#blog_slide_container {
position: relative;
overflow: hidden;
width: 400px;
z-index: 5;
border: 1px solid #000;
}

#inner_container{
position: relative;
width: 2000px;   
}

.block1 {
position: relative;
display: inline-block;
vertical-align: top;
top: 0px;
left: 0px;
width: 400px;
z-index: 6;
background-color: #333;
color: #FFF;
}
.block2 {
position: relative;
display: inline-block;
vertical-align: top;
top: 0px;
left: 0px;
width: 400px;
z-index: 6;
background-color: #333;
color: #FFF;
}
#bottom_container {
position: relative;
float: left;
width: 100%;
height: 280px;
z-index: 3;
background-color: #000;
}

Answer 1

Попробуйте это fiddle :

$(function() {
    var block1_h = 0;
    $(".left_slide").click(function() {
        $("#inner_container").stop(true, true).animate({
            left: -400
        }, 500, function() {
            block1_h = $(".block1").stop(true, true).animate({
                height: "1px"
            }, 1000).height();
        })
    });
    $(".right_slide").click(function() {
        $(".block1").stop(true, true).animate({
            height: block1_h
        }, 1000, function() {
            $("#inner_container").stop(true, true).animate({
                left: 0
            }, 500);
        });
    });
});

Я просто сохранил исходную высоту .block1 в переменной.Таким образом, я мог полностью изменить порядок анимации.

Answer 2

Я думал, что мы исправили это вчера Автоматическая анимация DIV

Возьми это http://jsfiddle.net/skram/fVKDy/17/