title: Adding "hoverIntent" to .live function
body: <p>Real simple question here - how do I add the <a href="http://cherne.net/brian/resources/jquery.hoverIntent.html" rel="nofollow">.hoverIntent plugin</a> from Brian Cherne to the following code in place of the <code>.live("hover", function</code></p>
  
  <pre><code>        $(".highlight").live("hover", function(){
              $(this).animate({"width": "454px", "height":"282px", "top: ":"94px", "left":"152px", "margin-top: ":"-94px", "margin-left":"-152px"}, 500);       
  
          });   
  </code></pre>
  
  <p>Here's the full code:</p>
  
  <pre><code>    $(document).ready(function(){         
  
          $('#sliding_grid li').hover(function() {
            $(this).css('z-index',1).data('origTop',$(this).css('top')).data('origLeft',$(this).css('left')).addClass('highlight');
  
          }, function() {
            $(this).css('z-index', 0);
          });
  
          $(".highlight").live("hover", function(){
              $(this).animate({"width": "454px", "height":"282px", "top: ":"94px", "left":"152px", "margin-top: ":"0", "margin-left":"0"}, 500);       
  
          });   
  
          $(".highlight").live("mouseout", function(){
              $(this).animate({"width": "148px", "height":"90px", "top: ":$(this).data('origTop'), "left":$(this).data('origLeft'), "margin-top: ":"0", "margin-left":"0"}, 500, function(){
               $(this).removeClass('highlight');   
              });        
  
          });        
  
      });
  </code></pre>