title: JS fade in not working correctly
body: <p>I have searched for about 2 hours now and I just can't get a hold of this. </p>
  
  <p>I am using bootstrap and I want to have three columns with "col-xs-6" placed next to each other. However, when I click the button, I want the outer column that is visible to collapse in and the column on the other side to show up. The blue column in the middle should not change at all, just the visibility of the outer columns. 
  I know I could just use <code>display: none</code> but this would not look as smooth as a CSS3 Transition.</p>
  
  <p>The fade Out works perfectly fine, but instead of fading in, the div will just be at 50% width right after the display property has set.</p>
  
  <p>Here is a fiddle:
  <a href="https://jsfiddle.net/zekr3af3/3/" rel="nofollow">Fiddle</a></p>
  
  <p>And here is the Code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-xs-6 red fadeIn"&gt;
        Hello i am the red div
      &lt;/div&gt;
      &lt;div class="col-xs-6 blue"&gt;
        Hello i am the blue div
      &lt;/div&gt;
      &lt;div class="col-xs-6 green fadeOut is-out"&gt;
        Hello i am the green div
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-xs-12"&gt;
        &lt;div class="pull-right"&gt;
          &lt;button type="button" class="btn btn-danger"&gt;
            &lt;span class="glyphicon glyphicon-plus"&gt;&lt;/span&gt;&amp;nbsp;TOGGLE
          &lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$('.btn').click(function(){
      var eleForFadeIn;
    var eleForFadeOut;
      if ($('.green').hasClass('is-out')){
      eleForFadeIn = $('.green');
      eleForFadeOut = $('.red');
    }
    else {
      eleForFadeIn = $('.red');
      eleForFadeOut = $('.green');
    }
    eleForFadeIn.addClass('fadeIn');
    eleForFadeIn.removeClass('fadeOut');
    eleForFadeOut.addClass('fadeOut');
    eleForFadeOut.removeClass('fadeIn');
  
    setTimeout(function() { doFadeIn(eleForFadeIn); }, 150);
    setTimeout(function() { doFadeOut(eleForFadeOut); }, 1500);
  });
  
  function doFadeIn(element){
    element.removeClass('is-out');
  }
  function doFadeOut(element){
      element.addClass('is-out');
  }
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.red{
    background-color: red;
    height: 250px;
    -webkit-transition: width 2s;
    transition: width 2s;
  }
  .blue{
    background-color: blue;
    height: 250px;
  }
  .green{
    background-color: green;
    height: 250px;
    -webkit-transition: width 2s;
    transition: width 2s;
  }
  .fadeOut{
    width: 0px;
  }
  .fadeIn{
    width: 50%;
  }
  
  .is-out{
    display: none;
  }
  </code></pre>
  
  <p>Thanks in Advance!</p>
  
  <p><strong>Edit</strong>: The timeout functions are used because i want the display property to be none at the end of the transition. Yes i tried to build in the transition eventlistener but it did not work... So if you know how to implement int i would appreciate any suggestions :-)</p>
  
  <p><strong>Edit2</strong>: Trying to express myself a bit more cleary about my goals.</p>