gpt4 book ai didi

JQuery 向下滑动动画,同时保持 DIV 的完整尺寸

转载 作者:行者123 更新时间:2023-12-01 00:51:42 25 4
gpt4 key购买 nike

当我使用 Jquery 向下滑动 DIV 时,div 动画看起来像是从上到下拉伸(stretch)/绘制 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 以全尺寸(当然其中一部分是隐藏的)从上到下滑动。

我添加了一张图片来明确我想要实现的目标。

enter image description here

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

最佳答案

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>

关于JQuery 向下滑动动画,同时保持 DIV 的完整尺寸,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18339240/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com