JQuery.on( "mouseenter" ) - подождите 2 секунды, затем выполните действие

У меня есть script, который показывает скрытый текст, когда вы наводите курсор на div. Но я хочу, чтобы это было отложено на 2 секунды, и если пользователь отталкивает мышь до 2 секунд, я не хочу ничего показывать.

Как это сделать?

Что у меня: http://jsfiddle.net/ZhrJT/

HTML:

<body>
    <div>hover this</div>
    <p class="hidden">unhidden!!</p>
</body>

JS:

$("body").on("mouseenter", "div", function(){
    $("p").removeClass("hidden");
}).on("mouseleave", "div", function(){
    $("p").addClass("hidden");
});

CSS

div {
    background-color:red;
    height:100px;
}

p.hidden {
    display:none;  
}

p {
    background-color:yellow; 
    height:100px;   
}

Ответы

Ответ 1

var timer;
$("body").on("mouseenter", "div", function(){
    timer = setTimeout(function () {
        $("p").removeClass("hidden");
    }, 2000);
}).on("mouseleave", "div", function(){
    clearTimeout(timer);
    $("p").addClass("hidden");
});

Там я пойду, это так просто. Просто установите тайм-аут, который скроет элемент при его запуске и отменит таймаут, если пользователь mouseleave элемент.

Ответ 2

Используйте setTimeout/clearTimeout. Что-то вроде этого:

$("body").on("mouseenter", "div", function(){
    $(this).data('timeout', setTimeout(function(){
       $("p").removeClass("hidden");
    }, 2000));
}).on("mouseleave", "div", function(){
    clearTimeout($(this).data('timeout'));
    $("p").addClass("hidden");
});