javascript - 使跳动的头部标签更加平滑

Question

当我运行这段代码时，标题有点跳跃而不是平滑过渡。我想解决这个问题。我尝试添加 fadeIn 和 fadeOut 使它更平滑。但是，当我点击标题时，它们似乎会上下跳动。这是我开始使用的代码:

$(document).ready(function(){
    $('.info').click(function(){
        $('.info').each(function(){
            $(this).next().fadeOut("slow");
        });
        $(this).next().fadeIn("slow");
    });
});

为了使过渡更顺畅，我想要以下内容:当我点击标题时，我希望标题淡出、向上移动，然后与应该出现的文本一起淡入用那个标题。所以我尝试了这个:

$(document).ready(function(){
    $('.info').click(function(){
        $('.info').each(function(){
            $('info').next().fadeOut("slow"); 
            $(this).next().fadeOut("slow");
        });
        $(this).next().fadeIn("slow");
        $('info').next().fadeIn("slow"); 
    });
});

<div>
    <a class="info" p style="font-size:30px" href="javascript:void(0);">Header 1</a>
    <h1 class="infoText" style="display:none">Text 1</h1>
</div>
<div>
    <a class="info" href="javascript:void(0);">Header 2</a>
    <h1 class="infoText" style="display:none">Text 2</h1>
</div>
<div>
    <a class="info" href="javascript:void(0);">Header 3</a>
    <h1 class="infoText" style="display:none">Text 3</h1>
</div>

但这并没有改变任何东西，也没有产生我想要的效果。有关如何执行此操作的任何建议？

Answer 1

slideUp , slideDown和 slideToggle可能是您正在寻找的:

$(document).ready(function(){
    $('.info').click(function(){
        $('.info').not(this).next().slideUp("slow");
        $(this).next().slideToggle("slow");
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <a class="info" p style="font-size:30px" href="javascript:void(0);">Header 1</a>
    <h1 class="infoText" style="display:none">Text 1</h1>
</div>
<div>
    <a class="info" href="javascript:void(0);">Header 2</a>
    <h1 class="infoText" style="display:none">Text 2</h1>
</div>
<div>
    <a class="info" href="javascript:void(0);">Header 3</a>
    <h1 class="infoText" style="display:none">Text 3</h1>
</div>