title: CSS3 transition with jQuery .addClass and .removeClass
body: <p>I have a big main navigation panel that I want to animate when it's deploying (expanding).</p>
  
  <p>I'm working with jQuery to trigger the visibility of it by adding/removing the class visible/hidden.</p>
  
  <p>I had to set a delay time to apply the hidden class because the trigger is a button outside of the panel's div. (if I used a rollover on the button, once you rollout the panel will disappear)</p>
  
  <p>The code is this</p>
  
  <pre><code>$(document).ready(function() {
      $('#menu-item-9').click(function(){
          $('#repair-drop').removeClass('hidden');
          $('#repair-drop').addClass('visible');
      });
  $('#repair-drop').on('mouseleave', function(e) {
      setTimeout(function() {
          $('#repair-drop').removeClass('visible').addClass('hidden');
      }, 600);        
  
  });
  });
  </code></pre>
  
  <p>My CSS is as follows</p>
  
  <pre><code>.hidden{
      max-height: 0px;
      -webkit-transition: max-height 0.8s;
      -moz-transition: max-height 0.8s;
      transition: max-height 0.8s;
  
  }
  .visible{
      max-height: 500px;  
  }
  </code></pre>
  
  <p>The transition effect is not working at all.</p>