如何在淡出期间对按钮移动进行动画处理

Question

在代码片段中，您可以看到当我单击淡出按钮时我有 2 个按钮，我的段落在此淡出期间淡出我希望我的按钮以动画方式缓慢取代段落。

$(document).ready(function(){
    $(".btn1").click(function(){
        $("p").fadeOut()
    });
    $(".btn2").click(function(){
        $("p").fadeIn();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<p>This is a paragraph.</p>
<button class="btn1">Fade out</button>
<button class="btn2">Fade in</button>

Answer 1

$(document).ready(function() {
  $(".btn1").click(function() {
    $("p").slideUp(1000);
  });
  $(".btn2").click(function() {
    $("p").slideDown(1000);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<p>This is a paragraph.</p>
<button class="btn1">Fade out</button>
<button class="btn2">Fade in</button>

Answer 2

应该是

这样：

$(document).ready(function(){
    $(".btn1").click(function(){
        $("p").css({ opacity: 0, transition: 'opacity 0.5s' }).slideUp(500);
    });
    $(".btn2").click(function(){
        $("p").css({ opacity: 1, transition: 'opacity 0.5s' }).slideDown(500);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<p>This is a paragraph.</p>
<button class="btn1">Fade out</button>
<button class="btn2">Fade in</button>

Answer 3

您可以使用

slideUp()和slideDown()而不是fadeIn()/fadeOut()。这样你就会得到一个流畅的动画：

$(document).ready(function() {
  $(".btn1").click(function() {
    $("p").slideUp()
  });
  $(".btn2").click(function() {
    $("p").slideDown();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<p>This is a paragraph.</p>
<button class="btn1">Fade out</button>
<button class="btn2">Fade in</button>

另外，我认为此操作不需要两个按钮，在这种情况下，您只需使用slideToggle()：

$(document).ready(function() {
  $(".btn1").click(function() {
    $("p").slideToggle()
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<p>This is a paragraph.</p>
<button class="btn1">Fade out</button>