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

当我运行这段代码时，标题会跳而不是平滑过渡。我想解决这个问题。我尝试添加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>

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

最佳答案

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>

关于javascript - 使跳动的头部标签更加平滑，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32680494/