jQuery - mouseenter上的滑動條>延遲> mouseleave上的滑動條

Question

我創建了一個非常簡單的jQuery滑動函數，但它需要改進。該函數的基本時間表需要：對了mouseenter

1. 了slideDown
2. 保持可見，直到鼠標離開
3. 當mouseleaves，2秒

^^這工作，但如果耽誤效果基本show你上下滑動幾次，該功能停止工作幾秒鐘。任何人都可以請建議解決方案？ 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); 
    }); 
});