title: Bootstrap: How to fade and then hide something using the default 'fade', 'hide', 'in' classes?
body: <p>Bootstrap obviously makes use of the 'hide', 'fade' and 'in' classes for its transitions.</p>
  
  <p>The problem I'm having is that using 'fade' and 'in' will change the opacity from 0 to 1.  The transition effect is perfect, but the content is still there taking up space on the page, even if you can't see it.  For example, if it's container has a border, there'll be a big white space before the border.</p>
  
  <p>I want to make use of their exisiting CSS transitions by adding and removing the 'in' class, but I also want whatever element that's fading out, to be hidden, but only after the transition is over.  So basically, exactly what they do in the modal, but I don't know how they do it.</p>
  
  <p>In my example below, adding or remove the hide means the div appears or disappears instantly, before the fade effect can happen.</p>
  
  <p><a href="http://jsfiddle.net/davidpauljunior/FU6pQ/" rel="noreferrer">JS fiddle here</a></p>
  
  <p>Example HTML:</p>
  
  <pre><code>&lt;div class="control-group"&gt;
      &lt;label class="control-label"&gt;Choose one:&lt;/label&gt;
      &lt;div class="controls"&gt;
          &lt;label class="radio inline"&gt;
              &lt;input type="radio" name="color-radio" id="yellow-trigger" value="yellow" /&gt;Yellow Box&lt;/label&gt;
          &lt;label class="radio inline"&gt;
              &lt;input type="radio" name="color-radio" id="red-trigger" value="red" /&gt;Red Box&lt;/label&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="yellow-box" class="hide fade"&gt;
      &lt;p&gt;I'm yellow&lt;/p&gt;
  &lt;/div&gt;
  &lt;div id="red-box" class="hide fade"&gt;
      &lt;p&gt;I'm red&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Example JS:</p>
  
  <pre><code>$(document).ready(function () {
      $('#yellow-trigger').click(function () {
          $('#yellow-box').addClass('in').removeClass('hide');
          $('#red-box').addClass('hide').removeClass('in');
      });
  
      $('#red-trigger').click(function () {
          $('#red-box').addClass('in').removeClass('hide');
          $('#yellow-box').addClass('hide').removeClass('in');
      });
  });
  </code></pre>