jQuery - mouseenter 上的 slideDown > 延迟 > mouseleave 上的 SlideUp

Question

我创建了一个非常简单的 jQuery 滑动函数，它可以工作，但需要改进。函数的基本时间线需要：

1. 鼠标输入时向下滑动
2. 在鼠标离开之前保持可见
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);
    });
});