javascript - 如何平滑地更改元素的值？

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>