Question

<div id="a">my content blah blah .....</div>
<div id="b" style="display: none">magic content blah blah</div>
<div id="c">other stuff</div>

在js（jQuery）中我使用$("#b").fadeIn()和$("#b").fadeOut()来控制div＃b的可见性

当jQuery Animation开始/结束时，最后一个div（div＃c）被移动（通过浏览器）向上（在div＃a下）（在fadeOut上）和向下（在div #b下）（在fadeIn上）

我如何设置div＃c的动作？（使用css转换平滑地上移和下移div（#c）。

带'移动'是指当项目消失（fadeOut）或屏幕的'分辨率'发生变化（响应适应）时由浏览器执行的元素重新定位感谢。

Answer 1

当您使用fadeIn()和fadeOut()时，您将元素从display: whatever更改为display: none;，反之亦然。使用显示方法的任何DOM元素都没有过渡属性 - 因此您最好切换到CSS3过渡https://www.w3schools.com/css/css3_transitions.asp，过渡属性的混合，例如opacity，visibility和max-height s！否则，您可以考虑使用诸如GSAP的JS库 - https://greensock.com/gsap

css过渡 - 动画响应重新定位

1 个答案: