Question

我想放一个fadeIn fadeOut（而不是show / hide），但是当我尝试从prev元素所在的内容跳转时，我不想对内容使用绝对位置。那么我如何以相同的方式使用动画来实现以下目标呢？那么我可以将它们分开，然后在点击时撤消分离吗？

$('.menu>li').on('click',function(e){
    $('.container>.'+ e.target.classList[0]).show().siblings().hide();
});

HTML

<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>

Answer 1

这是我提供的解决方案及其工作原理。实际上淡入和淡出动画需要延迟，以避免兄弟元素之间的混蛋。在hide和show中，动画没有延迟，所以看起来很好。只需编辑毫秒即可。默认我放了200。

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

我如何分离元素然后在点击时使用fadeIn / fadeOut显示

1 个答案: