3

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

jsfiddle

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 从上到下以全尺寸滑动（当然它的一部分是隐藏的）。

我正在添加一个图像以使其清楚我想要实现的目标。

在此处输入图像描述

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

4

2 回答 2

7

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>
于 2013-08-20T15:52:16.253 回答
0

只需添加 $('#your-text').slideDown() 与父div相同的效果设置

于 2013-08-20T15:39:10.023 回答