Question

以下是我尝试过的两个例子，它们都没有按预期工作。

http://jsfiddle.net/AndyMP/atyWW/1/和http://jsfiddle.net/AndyMP/atyWW/4/

我想要做的是将顶部区域淡出并使下部区块动画/滑动。在第一个例子中，它在隐藏顶部块之后跳转到位，在第二个示例中，它在容器DIV的底部留下一个空间（可能是因为我没有隐藏顶部DIV）。

非常感谢任何帮助。

Answer 1

问题是你的top已经是0，所以动画这个没有做任何事情，它跳过的原因是因为你正在调用hide。

您可以将顶部元素的不透明度更改为0，然后按如下方式修改顶部元素的高度。我还建议使用回调而不是延迟，除非你需要在第一个动画结束之前开始第二个动画，在这种情况下坚持延迟但是下面的代码应该给你一个例子，你应该从这里开始。

$(".disappear").click(function(){
    $(".top").fadeTo(250,0, function() {
        $(".top").animate({height:0},600);
    });
});

jsFiddle attached

或者，不是隐藏顶部元素并为顶部元素的高度设置动画，您可以为底部元素的margin-top设置动画。

Answer 2

试试：

$(function(){ 
    $(".disappear").click(function(){
        $(".top").fadeOut(250,function(){
            $(".middle").animate({top:0}, 600);
        });

    });
});

用那个css：

.top {
    position: absolute;
    top: 0;
    left: 0;
    height: 40px;
    width: 400px;
    background: green;
}
.middle {
    position: absolute;
    left: 0;
    top: 40px;
    height: 200px;
    width: 400px;
    background: red;
}

现场演示：http://jsfiddle.net/atyWW/19/

Answer 3

添加此代码以调整容器的高度 - $(".container").animate({height:$(".middle").height()},600);

http://jsfiddle.net/atyWW/26/

编辑：一些解释 - @Jon Taylor的回答解释了究竟发生了什么。我提供的代码设置了容器的高度，但是，顶部DIV仍然位于中间div之后。请注意，如果您将overflow属性设置为auto而不是hidden，如果top高于middle，则会出现滚动条（无论如何都可以使用jQuery删除）。请检查此example。

请注意上一个示例中的代码 - 它使用$top.height()来获取值，而不是将其硬编码为40px。您不必为CSS中的任何更改继续更新它。

JQuery动画，没有按预期工作

3 个答案: