CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
user3013013
user3013013

Reputation: 25

Bootstrap Transition for fadeIn() and fadeOut()

I am html and JavaScript newbie. here's my html code.

<div class="row" >
    <button class="..." id="button">
         ...
    </button>
     <div class="..." id="box">
         ...
     </div>
</div>

and my javascript:

$(document).read(function(){
     $('#box').hide();
     $('#button').click(function(){
          $('#button').fadeOut('slow');
          $('#box').fadeIn('slow);
    }
}

In this case, I want a seamless fadein/fadeout transition effect from the button to the box , but the above code will make the button and the box coexist for a few seconds (appears as button above box), before the button disappear (Then box takes the original place of the button).

Is there any bootstrap js or customized js allow me to have the seamless transition?

PS: I've tried hide('slow') and show('slow'). They don't quite hit the mark neither :s

Thank You!!!

Upvotes: 2

Views: 12399

Answers (2)

Pranav C Balan
Pranav C Balan

Reputation: 115222

Show the box div in fadeOut() complete callback function 

$(document).ready(function() {
  $('#box').hide();
  $('#button').click(function() {
    $('#button').fadeOut('slow', function() {
      $('#box').fadeIn('slow');
    })
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row">
  <button class="..." id="button">
    ...a
  </button>
  <div class="..." id="box">
    ...b
  </div>
</div>

Upvotes: 5

sushil bharwani
sushil bharwani

Reputation: 30187

fadein and fadeout functions have callbacks where the callback is called when the fadein /fadeout completes. 


$('#button').fadeOut('slow', function() {
      $('#box').fadeIn('slow');
    })

Here the fadein will be called only after the fadeOut has finished.

Upvotes: 1

Related Questions