JQuery：古いものを押し下げてテキストを変更する

Question

私は、トリガーされたときに新しいテキストが古いものをプッシュダウンし、古いものをが消えるようにします。。それは基本的には派手なテキストの置き換えです：新しいものは古いものを押し下げ、古いものは存在しません。

誰かがこれに似た何かを作成しましたJSFiddle

var slider = $("#slider"); 
    $("#button").on('click', function(){ 
    slider.slideUp(1500, function(){   
    slider.html("been changed").slideDown(1500);       
    }); 
}); 

しかし、それは逆のことです。それは上にスライドし、古いものを消滅させる。メソッドの逆変換は機能しません。私がしようとしていることを達成する別の方法がありますか？

Answer 1

をご覧ください。

var slider = $("#slider"); 
 
var slider2 = $("#slider2"); 
 
$("#button").on('click', function(){ 
 
slider2.html("been changed"); 
 
slider2.slideDown(1500, function(){ 
 
    slider.css("display","none"); 
 
}); 
 

 
});

#slider { 
 
border: 3px green solid; 
 
width: 200px; 
 
height: 200px;  
 
} 
 
#slider2 { 
 
border: 3px green solid; 
 
width: 200px; 
 
height: 200px; 
 
display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="slider2"> 
 
</div> 
 
<div id="slider"> 
 
    should change 
 
</div> 
 
<button id="button">Click me!</button>

それはあなたに右だと思います。 :-)