Question

如果可能，我正在修复此动画。第一部分完美运行，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

我以为我们昨天已经修好了Animating a DIV automatically

拿这个http://jsfiddle.net/skram/fVKDy/17/

DIV动画，滑动问题

2 个答案: