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

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

• javascript
• jquery
• html
• twitter-bootstrap

2 Answers 2

Show the box div in fadeOut() plete callback function

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

<script src="https://ajax.googleapis./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>

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

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

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