JQuery在保持DIV完整大小的同时向下滑动动画
Ida*_*ter 3 jquery slidedown jquery-animate
当我使用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从上到下滑动的全尺寸(当然是隐藏的一部分).
我正在添加一个图像,以便清除我想要实现的内容.
是否可以通过更改一些CSS或Jquery参数来实现此目的.我知道JQuery id只是玩高度因为我的DIV底部有圆角而且它们只出现在动画的末尾.
我添加了另一个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>
| 归档时间： |
|
| 查看次数： |
5691 次 |
| 最近记录： |