jquery - 如何删除鼠标移出/鼠标离开延迟的 div？

Question

我正在尝试延迟功能。当我单击某个段落时，菜单会添加到该段落的前面。但我需要隐藏菜单时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);        
});

​</p>