Jquery 如何分离元素，然后单击“淡入淡出”显示

我想设置一个淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出。那么，我怎样才能以同样的方式为以下内容使用动画呢？那么，我可以打开它们，然后单击撤消分离吗

HTML

一个
两个
三个
四个
五个

以下是1.的内容。。
以下是2.的内容。。
以下是3。。。
以下是4…的内容。。。。
以下是5…..的内容。。。。。

以下是我提供的解决方案及其工作原理。实际上，淡入淡出动画需要延迟，以避免兄弟元素之间的抖动。正如在“隐藏和显示”中一样，动画中没有延迟，所以对您来说效果很好。只需根据需要编辑毫秒。默认情况下，我投入了200英镑

$('.menu>li').on('click',function(e){
var target = $('.container>.'+ e.target.classList[0]);
target.siblings().fadeOut(200);
target.delay(200).fadeIn() });

---

我不想对内容使用绝对位置

这是最好的解决方案：。你为什么不想使用它？因为div的高度是动态的，我不能设置高度，并且它下面总是有其他元素。有一些方法可以解决这个问题，但是如果看不到你的实际HTML，就很难引导你。你需要使用绝对定位来阻止内容“跳跃”。只需计算要显示的div的高度，然后在fadeIn完成后将容器设置为该高度，这也会跳过内容

<ul class="menu">
    <li class="toggle1">One</li>
    <li class="toggle2">Two</li>
    <li class="toggle3">Three</li>
    <li class="toggle4">Four</li>
    <li class="toggle5">Five</li>
</ul>

<div class="container">
    <div class="toggle1">Here are the contents of 1..</div>
    <div class="toggle2" style="display:none;">Here are the contents of 2..</div>
    <div class="toggle3" style="display:none;">Here are the contents of 3...</div>
    <div class="toggle4" style="display:none;">Here are the contents of 4....</div>
    <div class="toggle5" style="display:none;">Here are the contents of 5.....</div>
</div>

$('.menu>li').on('click',function(e){
var target = $('.container>.'+ e.target.classList[0]);
target.siblings().fadeOut(200);
target.delay(200).fadeIn() });