如何在使用 jQuery replaceWith() 时顺利替换它

Question

>CODE：

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

Answer 2

根据您的要求，还有另一种方法可能最适合。

$(document).ready(function() {
  $("#btn_test").on("click", function(e) {
    $(this).fadeOut(1000);
    $(".text_div").fadeIn(1000);
  });
});

#btn_test {
  float: left;
  position: absolute;
  transition: .3s ease-in-out;
  background-color: #FFFFFF;
  border: 1px solid #CCCCCC;
  color: #000000;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  line-height:18px;
  width:120px;
}
.text_div {
  float: left;
  position: absolute;
  display: none;
  transition: .3s ease-out-in;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="padding: 40px;">
  <button id="btn_test">Click me</button>
  <div class="text_div">
    <input/>
  </div>
</div>