如何平滑更改元素的值？

Question

這是我的代碼：

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

如您所見，我使用了fadeIn()來使替換值操作變得平穩。 但是更換仍然很快發生。 我如何對其施加效果？

Answer 1

您可以在更改html之前添加.hide（）：

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

像這樣嗎？

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