jquery - JQuery 动画，未按预期工作

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附加

或者，您可以为底部元素的 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 后面。请注意，如果您将溢出属性设置为自动而不是隐藏，并且如果顶部高于中间，则会出现滚动条（无论如何都可以使用 jQuery 删除）。检查这个例子。

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