如何在淡出期间动画​​按钮移动

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").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 2

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

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