title: Opacity transition works on fade out, but not fade in
body: <p>This is frustrating me to no end. Before I post the code, here's a summary:</p>
  
  <p>The goal, in simple terms: when I double click X, I want it to fade out; when I click Y, I want X to fade in.</p>
  
  <p>The method: I'm using CSS to create the actual fade-in and fade-out "animations." I'm using JavaScript to apply the classes when necessary using a little trickery.</p>
  
  <p>The problem: the fade-in transition doesn't work -- the element just appears instantly. What is driving me insane is the fact that the fade-in, when instantly added back onto a faded-out object, works perfectly. I'll explain this better as a comment in the JS code.</p>
  
  <p>(Yes, I've added <code>opacity: 1</code> and <code>transition: opacity</code> onto the base elements. It had no effect at all.)</p>
  
  <p>The code:</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>*.fade-out {
      opacity: 0;
      transition: opacity 400ms;
  }
  *.fade-in {
      opacity: 1;
      transition: opacity 400ms;
  }
  *.hide {
      display: none;
      visibility: hidden;
  }
  </code></pre>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>$( '#ArtistEmblem' ).on( 'dblclick', function() {
      fadeOut($( '#ArtistEmblem' ));
      fadeIn($( '#btnShowLogo' ));
  });
  $( '#btnShowLogo' ).on( 'click', function() {
      fadeOut($( '#btnShowLogo' ));
      fadeIn($( '#ArtistEmblem' ));
  });
  
  function fadeOut(element) {
      element.addClass( 'fade-out' );
  
      setTimeout( function () {
          element.addClass( 'hide' );
  
          /*
          * I tried immediately adding the 'fade-in' class here
          * and it worked -- as soon as the element faded out, it faded
          * back in (using the CSS transition). However, outside of this,
          * it REFUSES to work; everything appears instantly
          */
  
          console.log('timer triggered');
      }, 400);
  }
  
  function fadeIn(element) {
      element.removeClass( 'hide' );
      element.removeClass( 'fade-out' );
      element.addClass( 'fade-in' );
  }
  </code></pre>
  
  <p><strong>Relevant HTML</strong></p>
  
  <pre><code>&lt;div id="ArtistEmblem"&gt;
      &lt;img src="img/logo_artist_2.png" /&gt;
  &lt;/div&gt;
  
  &lt;div id="PopMenu" class="collapse"&gt;
      &lt;article&gt;
          &lt;header&gt;
              &lt;b&gt;Debug Menu&lt;/b&gt;
          &lt;/header&gt;
          &lt;section&gt;
              &lt;button id="btnOpenOverlay"&gt;Open Overlay&lt;/button&gt;
              &lt;button id="btnShowLogo" class="hide"&gt;Show Logo&lt;/button&gt;
              &lt;button id="btnClose"&gt;Close Menu&lt;/button&gt;
          &lt;/section&gt;
      &lt;/article&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I apologize if this is something obvious but I've wasted far too much time trying to solve it. I am also open to better, faster, or more efficient solutions if that would be the best answer. Thanks in advance!</p>