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

Question

In code snippet you can see I have 2 buttons when i click on fade out button my paragraph fade out during this fade out I want my buttons to take place of paragraph slowly animatedly.

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

This should be it:

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

You can use slideUp() and slideDown() instead of fadeIn()/fadeOut() . That way you will get a smooth animation:

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

Also, I don't think there is need for two buttons for this operation, and in this case you can just use 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>