jquery doing some weird number crunching

   var trueHeight = ($(".item").outerHeight() + parseInt($('.item').css('marginTop')) + parseInt($('.item').css('marginBottom')));
 
   $("#next").click(function(){
      $("#movethem").animate({
         top : - trueHeight
                     }, 500);
   
      });
   
   $("#previous").click(function(){
      $("#movethem").animate({
         top : trueHeight
                     }, 500);
   
      });  
 

<div id="maincontentwrap">
<div id="movethem">
<div class="item">
<div class="content">
<img name="" src="" alt="" style="background-color: #333" align="left" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis erat et ligula imperdiet convallis... </p>
<p>...</p>
<p class="more"><a href="#">More...</a></p>
</div>
</div>
<div class="item">
<div class="content">
<img name="" src="" alt="" style="background-color: #333" align="left" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis erat et ligula imperdiet convallis...</p>
<p>...</p>
<p class="more"><a href="#">More...</a></p>
</div>
</div>
 
<div class="item">
<div class="content">
<img name="" src="" alt="" style="background-color: #333" align="left" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis erat et ligula imperdiet convallis... </p>
<p>...</p>
<p class="more"><a href="#">More...</a></p>
</div>
</div>
 
</div>
</div>
<div class="buttons">
<a href="#" id="previous">&lt;&lt; Previous</a>
<a href="#" id="next">Next &gt;&gt;</a></div>
</div>