Jquery 隐藏元素后，使下一个元素保持固定

假设一个HTML文件中有三个元素，其中一个（中间的一个；.div2）是隐藏的。我试图通过使用jQuery单击按钮来取消隐藏隐藏的元素（.div2）和隐藏第一个元素（.div1）。但问题是，当我隐藏第一个元素（.div1）并取消隐藏隐藏的元素（.div2）时，下一个元素（第三个；.div3）向上滑动并与未隐藏的元素混合

我该怎么解决这个问题

$（函数（$）{
$（“.myButton”）。单击（函数（）{
$（“.div1”）.fadeOut（）；
$（“.div2”）.fadeIn（500）；
});
});

隐藏
元素1-将被隐藏
元素2-隐藏的元素
元素3-将向上滑动并与元素2混淆的元素
使用Jquery CSS隐藏该元素。最好使用不透明度来隐藏/显示效果，并使用CSS转换。
使用淡出的回调参数——动画完成时调用它。这样，一旦第一个div完全隐藏，第二个div就开始显示，因此始终只有一个div占据垂直空间：


$（函数（$）{
$（“.myButton”）。单击（函数（）{
$（“.div1”）.fadeOut（函数（）{
$（“.div2”）.fadeIn（500）；
});
});
});

隐藏
元素1-将被隐藏
元素2-隐藏的元素
元素3-将向上滑动并与元素2混淆的元素，因为
fadeIn（）
和
fadeOut（）
都是动画，您同时使用它，在动画的某个点，它们都变成
显示：块
，这就是您面临问题的原因

因此，可以使用
hide（）
而不是
fadeOut（）
或者只使用
fadeOut（0）

堆栈片段


$（函数（$）{
$（“.myButton”）。单击（函数（）{
$（“.div1”）.hide（）；
//或$（“.div1”）。淡出（0）；
$（“.div2”）.fadeIn（500）；
});
});

隐藏
元素1-将被隐藏
元素2-隐藏的元素
元素3-将向上滑动并与元素2混淆的元素
编辑：

我创建了JSFIDLE，它演示了确切的需求。我希望这会有所帮助：

下面的原始答案：

问题是淡出将添加
显示：无添加到元素，这将导致该元素从文档流中删除，因此所有样式都不适用于该元素。因此，它下面的元素将向上滑动。诀窍是元素应该保持不可见（而不是移除）。这里有一个简单的解决方案，我使用
opacity:0隐藏元素：

注意：我使用CSS转换创建淡入淡出效果


$（函数（）{
$（'button'）。在（'click'，函数（）{
$（'.div1.div2'）.toggleClass（'transp'）；
});
});
div{
不透明度：1；
过渡：不透明度0.6s；
}
运输部{
不透明度：0；
}
钮扣{
边缘顶部：10px；
}

这是第一组
这是第二组
此div始终可见
切换div1和div2
为您的div显示CSS代码。@RajanBenipuri是的，问题在于它的样式属性-389;-。通过将其高度更改为“自动”将其修复。谢谢，但这与OP尝试执行的操作不同：
hide
无参数不执行动画，而
fadeOut
执行动画。如果你使用
hide（400）
来模拟与
fadeOut（0）
相同的动画时间，那么空间问题又来了。@trincot是的，所以OP可以使用
hide（）
而不是
fadeOut（0）
或
fadeOut（0）
来代替
。OP使用
fadeOut（）
，这相当于
fadeOut（400）
。所以我们应该假设OP想要一个400毫秒的淡出动画，而
hide（）
是即时的。但是现在有了额外的空白。我不认为这是OP的意图。它是为了证明始终可见的div保持在它的位置。我相信这里的意图是，他想用另一个字段替换一个字段，并实现淡入淡出效果，而无需向上滑动地图。它可以通过重叠两个元素“.div1”和“.div2”来实现。这里有一个简单而干净的解决方案，可以在两个div之间切换转换。希望这会有帮助，谢谢。但还有一个问题。div2的高度不同于div1，因此仍然存在一些重叠。