Animate on mouseover

HTML

<div id="body">
  <div id="topmenu">

    <div id="menucontent">Conceptual Development<br>Brand Strategy &amp; Communication<br>Commercial Photography</div>
  </div>

</div>

CSS

#body {
  height: 200px;
  width: 300px;
  background-color: white;
 }

#topmenu {
  position: relative;
  top: 30px;
  float: right;
  background-color: black;
  width: 0px;
  height: 70px;
}

#menucontent {
  width: 288px;
  height: 100%;
  margin-left: 0px;
  background-color: gray;
  text-align: right;
  padding-top:12px;
  padding-right:12px;
}

JavaScript

//http://stackoverflow.com/questions/5813728/trying-to-make-a-menu-like-this-one
$(function() {

  $('#body').mouseover(function() {
    var menu = $("#menucontent");
    menu.animate({
      marginLeft: '-300px'
    }, 500, function() {});
  });


  $('#body').mouseleave(function() {
    var menu = $("#menucontent");
    menu.animate({
      marginLeft: '0'
    }, 1000);

  });




});