如何在淡出过程中为按钮移动设置动画

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>