JQuery：通過按下舊文本來改變文本

Question

我試圖用JQuery來實現一個效果，當觸發時，一個新文本推下舊文件，並使舊文件消失。這基本上是一個花哨的文字替換：新的推動舊的，老的停止存在。

有人在這個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>

希望它是正確的和你的。 :-)