title: Make bootstrap div fade out when adding 'hidden' class
body: <p>I am using Bootstrap for css and I need help in fading out a div when the class 'hidden' is toggled. </p>
  
  <p>My site structure is pretty simple: there are 3 main container divs: search, wait and show. Essentially, show is the lowest positioned one, wait is on top of show and search is at the very top. </p>
  
  <p>All I need is for search to fade out over 3 seconds when this Jquery event is fired:</p>
  
  <pre><code>    $('.search').toggleClass('hidden');
  </code></pre>
  
  <p>I don't want it to just instantly disappear. Same with the wait div. I have tried using </p>
  
  <pre><code>    $(".searchBar").fadeOut("slow", function() {
          $('.searchBar').toggleClass('hidden');
      });
  </code></pre>
  
  <p>But it doesn't work. The fadeout/fadein don't seem to have any visible effect. Since the hidden class is already in bootstrap, I do not want to create another custom one; there's got to be a way to accomplish this. </p>