Question

这是我的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

如您所见，我已使用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>

如何顺利更改元素的值？

3 个答案: