Question

当我使用Jquery向下滑动DIV时，div animatino看起来像是从顶部到底部拉伸/绘制div。

HTML

<body>
<div style="width:400px;background-color:black; height:50px">
    <div id="error" style="background-color:red; color:white; display:none; width:120px">the error message</div>
</div>
    <div id="button" style="margin-top:20px; background-color:gray; width:70px; cursor:pointer;">click me!</div>
</body>

js（jquery-ui）

$(document).ready(function(){

    $("#button").click(function(){
      $('#error').slideDown('slow', function () {
            // Animation complete.
        });
    });
});

我希望动画看起来像DIV从上到下滑动的全尺寸（当然是隐藏的一部分）。

我正在添加一个图像，以便清除我想要实现的目标。

enter image description here

是否可以通过更改一些CSS或Jquery参数来实现此目的。我知道JQuery id只是玩高度因为我的DIV底部有圆角而且它们只出现在动画的末尾。

Answer 1

http://jsfiddle.net/zmX5X/3/

我添加了另一个div并将position: absolute;和底部设置为0，然后我将父div设置为position: relative;

您可能需要使用容器来获得除滑动之外的所需内容。

<body>
    <div style="width:400px;background-color:black;height: 200px;">
        <div id="error" style="position: relative; background-color:red; color:white; display:none; width:120px; height: 50px;">
            <div style="position: absolute; bottom: 0;">the error message</div>
        </div>
    </div>
    <div id="button" style="margin-top:20px; background-color:gray; width:70px; cursor:pointer;">click me!</div>
</body>

Answer 2

只需添加$（'＃your-text'）。slideDown（），效果设置与父div相同

JQuery在保持DIV完整大小的同时向下滑动动画

2 个答案: