jQuery - 在mouseenter上的slideDown＆gt;延迟＆gt;在mouseleave上滑行

Question

我创建了一个非常简单的jQuery滑动功能，但需要改进。该功能的基本时间表需要：

1. 在mouseenter上的SlideDown
2. 保持可见直到mouseleave
3. 当鼠标移动时，将SlideUp延迟2秒

^^这样可以，但是如果你上下滑动几次，该功能会停止工作几秒钟。有人可以建议一个解决方案？ JS FIDDLE附件

JSFIDDLE：http://jsfiddle.net/lord_dev/b1g50eqk/4/

$(document).ready(function(){
    $hover = true;
    $( "#slide" ).mouseenter(function() {
        if($hover) {
            $( ".slide--hidden" ).slideDown('fast');
        }
    });
    $( "#slide" ).mouseleave(function() {
        $hover = false;
        $( ".slide--hidden" ).delay(2000).slideUp('fast').queue(function(){
            enableHover();
            $(this).dequeue(); 
        });
    });
    function enableHover() {
        $hover = true;
    }
});

Answer 1

用这个替换你的javascript。如果我正确理解你的问题，它会很有效。

$(document).ready(function(){
    var thetimeout;
    $('#slide').mouseover(function() {
        clearTimeout(thetimeout);
        $('.slide--hidden').slideDown();
    });
    $('#slide').mouseleave(function() {
        thetimeout = setTimeout(function() {
            $('.slide--hidden').slideUp();
        }, 2000);
    });
});