Question

CODE：

＆＃13;

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

＆＃13;

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

＆＃13;

在更换过程中有一些刚性。

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

你能帮我顺利更换吗？

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

＆＃13;

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

＆＃13;

#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;  
}

＆＃13;

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

＆＃13;

如何在使用jQuery replaceWith（）时顺利替换它

2 个答案: