如何在淡出期間動畫​​按鈕移動

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>