How can I change the value of an element smoothly?

Question

Here is my code:

 $('button').on('click', function(){ $('div').html('<p>something new!</p>').fadeIn(1000); }); 

 div{ border: 1px solid gray; text-align: center; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <p>something<p> </div> <br> <button>change div's value</button> 

As you see, I've used fadeIn() to make replacing-value-operation smoothly. But still replacement happens quickly. How can I apply an effect on it?

Answer 1

You can add .hide() before change html :

 $('button').on('click', function(){ $('.d').hide().html('<p>something new!</p>').fadeIn(1000); }); 

 div{ border: 1px solid gray; text-align: center; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="d"> <p>something<p> </div> <br> <button>change div's value</button> 

Answer 2

淡入淡出之前，只需将其隐藏即可：

$('div').hide().html('<p>something new!</p>').fadeIn(1000);

Answer 3

Something like this ?

 $('button').on('click', function(){ var replacingDiv = $('div.replace'); $(replacingDiv).fadeOut(500); setTimeout(function(){ $(replacingDiv).html('changed').fadeIn(1000); }, 500); }); 

 div{ border: 1px solid gray; text-align: center; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="replace"> <p>something<p> </div> <br> <button>change div's value</button>