如何在mouseout/mouseleave上延遲刪除div？

Question

我試圖做一個延遲功能。當我點擊某個段落時，MENU被預置在本段中。但我需要隱藏MENU當mouseleave或mouseout延遲。

下面是一個例子：http://jsfiddle.net/ynternet/bZLAv/

HTML

<p class="add_to_this1">Click here 1</p> 
<p class="add_to_this2">Click here 2</p> 
<p class="add_to_this3">Click here 3</p> 

<div id="menu"> I'm here</div> 

jQuery的

jQuery.fn.handler = function() { 
    $(this).on({ 
     click: function(e) { 
      if ($(this).find("#menu").length) { 
       return; 
      } 
      $('#menu').prependTo($(this)); 
      $("#menu").css({ 
       position: "absolute", 
       left: "100px" 
      }).show(); 
     } 
    }); 
} 
$(".add_to_this1").handler(); 
$(".add_to_this2").handler(); 
$(".add_to_this3").handler(); 

Answer 1

這裏有一個jsFiddle例如

jQuery.fn.handler = function() { 
    $(this).on({ 
     click: function(e) { 
      if ($(this).find("#menu").length) { 
       return; 
      } 

      $('#menu').prependTo($(this)); 

      $("#menu").css({ 
       position: "absolute", 
       left: "100px" 
      }).show(); 
     } 
    }); 
} 
$(".add_to_this1").handler(); 
$(".add_to_this2").handler(); 
$(".add_to_this3").handler(); 

$('p[class^=add_to_this]').on('mouseleave', function(e) { 
    setTimeout(function() { 
     $('#menu').hide(); 
    }, 2000);   
});