CODEWITHSUNDEEP
jqueryhtml
David Foie Gras
David Foie Gras

Reputation: 2080

How to replace it smoothly in using jQuery replaceWith()

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>

It has some rigidity during replacing.

I think there is good way to use fadeIn(), but don't know how to do it.

Could you help me to make it replace smoothly?

Upvotes: 1

Views: 964

Answers (2)

Dipak
Dipak

Reputation: 2308

There is another way which may probably best suitable as per your requirement.

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

Upvotes: 2

Yusuf Kandemir
Yusuf Kandemir

Reputation: 950

The div needs to be hidden at first to be able to apply fade in. The div is inside another div so you can select it with $('div > div') and use hide function on it then use fade in then voila.

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>

Upvotes: 2

Related Questions