title: jquery animate div with mouseenter and mouseleave
body: <p>I'm trying to create a menu where the item that the mouse is over slides to the right. After the mouse leaves, I want the div to move back to its original position. Right now, when I mouse over, the div moves to the right, but when I mouse out, it just stays there and doesn't move back to the left.</p>
  
  <pre><code>&lt;script&gt; 
  $(document).ready(function(){
     $(".menu_option").mouseenter(function(){
      $(".menu_option").animate({left:'50px'});
    });
    $(".menu_option").mouseleave(function(){
      $(".menu_option").animate({right:'50px'});
    });
  });
  &lt;/script&gt; 
  </code></pre>
  
  <p>css looks like this</p>
  
  <pre><code>.menu_option {
  height: 50px;
  width: 150px;
  position: relative;
  }
  .menu_holder {
  float: left;
  height: 300px;
  width: 150px;
  position: relative;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="menu_holder"&gt;
  &lt;div class="menu_option"&gt;Content for  class "menu_one" Goes Here&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Where am I going wrong?</p>