Jquery active on hover only when the mouse is on the div

Question

So I have a slideup footer, but If I go fast with the mouse over the div, it happens just a jump of the div, but I want also want to display the content, I created a video HERE: http://screencast.com/t/CDQUDQP3 so you can understand it better, If I hover over with the mouse a lil bit slower it works fine.

Here is my code:

var $footer         = $('footer'),
        $footerHeader  = $('.footer-header'),
        $footerDisplay = $('.footer-display'),
        $totalHeight   = ((parseInt($footerDisplay.css('height'))) + 50)+'px';
$('footer').stop(1,1).hover(function(){
    //mouse in
    $footerHeader.css('visibility','hidden');
    $footerDisplay.stop(1,1).slideUp(function(){
        $(this).show();
        $footer.css('height',$totalHeight);
    });
    $footer.stop(1,1).animate({'margin-top':'-'+$totalHeight});

},function(){
    //mouse out
    $footer.stop(1,1).animate({'margin-top': '-57px','height':'57px'});
    $footerDisplay.stop(1,1).slideUp();
    $footerHeader.css('visibility','visible');
});

And HTML:

<footer>
    <div class="footer-header">
        <h3>
            <span class="sprite arrow-footer"><!-- dirty hack--></span>
            OPEN
        </h3>
    </div><!--end footer-header-->

    <div class="footer-display clearfix">
            <?php dynamic_sidebar("the_footer"); ?>
    </div><!-- end footer-display-->
</footer>

Answer 1

You need hoverIntent, a jquery plugin. from the docs :

hoverIntent is a plug-in that attempts to determine the user's intent... like a crystal ball, only with mouse movement! It works like (and was derived from) jQuery's built-in hover. However, instead of immediately calling the onMouseOver function, it waits until the user's mouse slows down enough before making the call.

read more and download it here .