使跳跃的头部标签更加平滑答案

【问题标题】：Making jumpy head tags much smoother使跳跃的头部标签更加平滑
【发布时间】：2015-09-20 22:45:55
【问题描述】：

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

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

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

【问题讨论】：

什么是“上移”？请注意，.each() 将为所有 .info 元素设置动画
你能创建一个 jsfiddle 吗？
在开始淡入之前您无需等待淡出

标签： javascript jquery css

【解决方案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>

【讨论】：

谢谢。这正是我想要的！

【解决方案2】：

尝试删除.each()，使用.fadeOut()、.parent()的complete函数来选择被点击的.info、.insertBefore()的父div到被点击的.info元素的“上移”容器

$(document).ready(function() {
  $('.info').click(function() {
    $(this).next().fadeOut("slow", function() {
      $(this).parent()
      .insertBefore($("div:first"))
      .find(".infoText")
      .fadeIn("slow")
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.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>

【讨论】：