title: Conflict between CSS transition and jQuery fade
body: <p>I'm trying to create a tiled wall with a little menu to <code>display: none</code> some elements based on their class. In my CSS I have CSS transitions which are causing <code>fadeIn</code> and <code>fadeOut</code> to not work. If I add a time, the element will take that long to disappear, but there is no actual fading. </p>
  
  <p>The CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>.block:not(.noTransition), .block a img, #main_side p, #main_content, #menu_container{
      -webkit-transition: all 1s ease-in-out;
      -moz-transition: all 1s ease-in-out;
      -o-transition: all 1s ease-in-out;
      -ms-transition: all 1s ease-in-out;
      transition: all 1s ease-in-out;
  
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
  }
  </code></pre>
  
  <p>The JavaScript using jQuery:</p>
  
  <pre class="lang-js prettyprint-override"><code>$(document).ready(function(){
      $('.button').not("#all").click(function(){
          var theId = $(this).attr('id');
          $('.block').not('.'+theId).addClass("noTransition");
          $('.block').not('.'+theId).fadeOut('slow', function(){
              $('.block').not('.'+theId).addClass("covered");
              $('.block').not('.'+theId).removeClass("noTransition");
  
          });
          $('.'+theId).addClass("noTransition");
          $('.'+theId).fadeIn('slow',function(){
              $('.'+theId).removeClass("covered");
              $('.'+theId).removeClass("noTransition");    
          });
          getScreenSize();
      });
      $("#all").click(function(){
          $('.block').removeClass("covered");
          $('.block').show();
      });
      getScreenSize();
  });
  </code></pre>
  
  <p>If I remove the transitions from my CSS the fades do work, but I also want to keep the transitioning to reposition the elements after they have been revealed/hidden.</p>