Jquery DIV动画，滑动问题

如果可能的话，我希望修复这个动画。第一部分工作完美，DIV向左滑动以显示更多内容，下面的DIV向上滑动。反之亦然，因为内容DIV没有正确显示，并且下面的DIV没有向下滑动

感谢您的帮助

这是昨天讨论的继续

CSS

试试这个：

---

我只是将原始的

.block1

高度保留在一个变量中。这样我就可以完全颠倒动画的顺序了。

我以为我们昨天就把它修好了

---

拿这个来说

你不需要在变量中存储高度，你可以在这种情况下使用“toggle”-Danwitt问题是

toggle

在动画完成时隐藏div，从而使

#内部容器
的
左：-400px
移位
块2
看不见（因为
block1
不再显示其400px）。我想保存
高度
比将
#内容器
的左调回到0，然后在
上调回-400要快。右侧
点击我刚发现我的小提琴坏了。我忘了将外容器调回
左：0
。该死的铬重绘算法：）
     $(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);
    })
});
});

#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;
}

$(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);
        });
    });
});