Jquery активен при наведении, только когда мышь находится на панели

Question

Итак, у меня есть нижний колонтитул, но если я быстро наведу курсор мыши на элемент div, произойдет просто переход элемента div, но я также хочу показать содержимое, я создал видео ЗДЕСЬ: http://screencast.com/t/CDQUDQP3 чтобы вы могли лучше понять это, если я наведу курсор мыши чуть-чуть медленнее, он будет работать нормально.

Вот мой код:

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');
});

И 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

Вам нужен hoverIntent, плагин jquery. из документов:

hoverIntent - плагин, который пытается определить намерение пользователя ... как хрустальный шар, только движением мыши! Он работает как (и был получен из) встроенного наведения jQuery. Однако вместо немедленного вызова функции onMouseOver она ждет, пока мышь пользователя не замедлится достаточно, прежде чем сделать вызов.

читать дальше и скачать его здесь .