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

尝试使用.each() complete .fadeOut()函数删除.parent()，以选择点击div的父.info，.insertBefore() }“向上移动”单击的.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>

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

1 个答案: