如何平滑更改元素的值？

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>