如何在淡出期间为按钮移动设置动画

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

您可以使用 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>

Answer 2

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

应该是这样的：

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

如何在淡出期间为按钮移动设置动画

How to animate button movement during Fade Out

javascript

jquery

twitter-bootstrap

jquery-animate