jquery - 如何使用jQuery的replaceWith()顺利替换它

Question

代码:

$(document).ready(function() {
  var replace_div = '<div><input/></div>';
  $('#btn_test').click(function() {
    $('#btn_test').fadeOut('', function() {
      $('#btn_test').replaceWith(replace_div);
    });
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div style="padding: 40px;">
  <button id="btn_test">test_btn</button>
</div>

更换时有一定的刚性。

我认为有一个很好的方法来使用fadeIn()，但不知道该怎么做。

你能帮我顺利更换吗？

Answer 1

该 div 首先需要隐藏才能应用淡入。 div 位于另一个 div 内，因此您可以使用 $( 选择它'div > div') 并对其使用隐藏功能，然后使用淡入，然后瞧。

var replace_div = '<div><input/></div>';
$('#btn_test').click(function () {
  $('#btn_test').fadeOut('', function () {
    $('#btn_test').replaceWith(replace_div);
    $('div > div').hide().fadeIn(1000);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="padding: 40px;">
  <button id="btn_test">test_btn</button>
  <br>
</div>