当我使用 Jquery向下滑动DIV时,div animatino看起来像是从顶部到底部拉伸/绘制div. jsfiddle HTML bodydiv style="width:400px;background-color:black; height:50px" div id="error" style="background-color:red; color:white; dis
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底部有圆角而且它们只出现在动画的末尾.
http://jsfiddle.net/zmX5X/3/我添加了另一个div并设置位置：绝对;并且底部为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>