Javascript 在jQuery添加子级时转换容器的大小

我正在寻找一种方法，当jQuery添加一个子元素或显示一个隐藏的子元素时，或者。这可能更好地解释了这一点。当点击标签显示第二个标签时，切割器不会立即转换为新的大小，有没有办法慢慢转换它？我尝试了CSS和JS的每一种组合，但都没有成功。谢谢你的帮助

函数加载（）{
$（“#示例”）.hide（）；
$（“标签”）。单击（函数（）{
$（“#示例”）.fadeIn（）；
})
}

div{
显示：网格；
网格模板列：1fr；
边框：1px纯黑；
字体大小：50px；
}

展示
附加

如果您希望延迟实际元素及其属性（边框）的显示，可以向JS代码添加一个

setTimeout（）

函数，该函数将延迟超时函数中设置的给定时间，然后它将运行内置的

fadeIn

jQuery函数

您可以添加CSS动画，并使用@关键帧使动画不透明度淡入，但这将仅限于CSS中的某些属性

如果这不是你想要达到的目标，请告诉我。我使用了您在JSFIDLE中链接到的示例代码

功能延迟衰减（时间）{
setTimeout（（）=>$（“#示例”）.fadeIn（），time）；
}
函数加载（）{
$（“#示例”）.hide（）；
$（“标签”）。单击（（）=>delayFade（1500））；
}

div{
显示：网格；
网格模板列：1fr；
边框：1px纯黑；
字体大小：50px；
}

展示
附加

您可以使用

.slideToggle（）

-这将随着父div大小的增加而向下滑动底部边框

$("#example").slideToggle();

这也将使底部边界在隐藏时平滑过渡

---

函数加载（）{
$（“#示例”）.hide（）；
$（“标签”）。单击（函数（）{
$（“#示例”）.slideToggle（）；
})
}

div{
显示：网格；
网格模板列：1fr；
边框：1px纯黑；
字体大小：50px；
}

展示
附加

因此，您可以向

fadeIn（3000）

=>添加计时

3000

=

3秒

但是，边框将在fadeIn计时将元素淡入视图之前显示。你想知道真正的边境法吗？我可能说得不好。第一个JSFIDLE是我的项目的一个极其精简的版本。看看这个稍微更新了一下的。我正在寻找新的蓝色/div扩展，以淡入文本旁边，而不是立即出现在屏幕上。想法？这太完美了！“滑动”底部边框也是我脑海中的一个选择，但我怀疑有没有简单的方法可以做到这一点+1.