title: jQuery - On Hover of div, slide in div and be able to hover over the newly opened div
body: <p>I'm trying to do hover over bottom bar, which will slide in another div just above it which I can click items located within on and then when i mouse off both the "appeared div" will slide away.</p>
  
  <p>However, when I move my mouse from the bottom bar to click on something in the newly appeared div (slid in div) it re-enabled the effect, how can I stop this so I can hover over both (after the slid in div is enabled) and have it how restart the effect essentially placing it into a loop of the same slideDown/slideUp effect.</p>
  
  <p>Here's my code:</p>
  
  <pre><code>$(".playlist").hide();
  $(".player, .playlist").hover( 
      function(){ $(".playlist").slideDown(); },
      function(){ $(".playlist").slideUp(); }
  );
  </code></pre>
  
  <p>And my HTML:</p>
  
  <pre><code>&lt;div class="playlist"&gt;
  &lt;!-- This would display some content that I can click on --&gt;
  &lt;/div&gt;
  
  &lt;div class="player"&gt;
  &lt;!-- This expands across the whole window and is fixed to the bottom --&gt;
  &lt;/div&gt;
  </code></pre>