title: Optimize jQuery hover code to perform better (smoother animation)
body: <p>Lately I've been spending some time reading about jQuery optimization tips which has certainly helped increase the performance of my scripts.</p>
  
  <p>However, I've got this featured news section on my site, which on mouse hover slides more information into place, and this section doesn't perform very well in any browser except Safari (and probably Chrome too, then.)</p>
  
  <p>The reason for this, I believe, is that it's doing quite some DOM traversing and calculations on every mouseover/mouseout event before animating.</p>
  
  <p>My question is simple: Is there any way to optimize the code below so that the animation runs more smoothly?</p>
  
  <pre><code>$('#featuredSide .featuredBox,#featuredBottom .featuredBox,#archiveVideos .featuredBox').hover(function(){ 
  var boxHeight = parseInt($(this).css('height'))-8;
  var bottomOrSide = $(this).parents("div[id^='featured']").attr("id")
  var captionPos = 76;
  var captionHeight = parseInt($(this).find(".videoCaption").css('height'));
  var animateTo = boxHeight-captionHeight;
  
  $(".videoCaption", this).stop().animate({top:animateTo + 'px'},{queue:false,duration:160});
  }, function() {
  $(".videoCaption", this).stop().animate({top:captionPos},{queue:false,duration:100});
  });
  </code></pre>
  
  <p>Since the site I'm working on hasn't been published yet I've <a href="http://dl.getdropbox.com/u/65293/featured-jqueryslide.png" rel="nofollow noreferrer">uploaded a screenshot of the news section</a> to give you an idea of what it looks like.</p>
  
  <p>Thanks!</p>