我正在寻找一种方法，当 jQuery 添加一个子元素或显示隐藏的元素时，以动画方式增加元素(边框)大小。这个JSFiddle可能更好地解释了这一点。当单击标签显示第二个标签时，分隔线不会立即转换为新尺寸，有没有办法慢慢转换它？我已经尝试了我能想到并在 Stack 上找到的所有 CSS 和 JS 组合，但都无济于事。感谢帮助!
function load() {
$("#example").hide();
$("label").click(function() {
$("#example").fadeIn();
})
}div {
display: grid;
grid-template-columns: 1fr;
border: 1px solid black;
font-size: 50px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body onload=load()>
<div>
<label>Shown</label>
<label id=example>Addition</label>
</div>
</body>最佳答案
您可以使用 .slideToggle() - 这会随着父 div 大小的增加而向下滑动底部边框。
$("#example").slideToggle();
隐藏时，这也会使底部边框平滑过渡。
function load() {
$("#example").hide();
$("label").click(function() {
$("#example").slideToggle();
})
}div {
display: grid;
grid-template-columns: 1fr;
border: 1px solid black;
font-size: 50px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body onload=load()>
<div>
<label>Shown</label>
<label id=example>Addition</label>
</div>
</body>关于javascript - 当 jQuery 添加子项时改变容器的大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65649155/