Jquery задерживает мышь

Question

У меня есть этот сценарий:

$("#menu ul li").mouseover(
    function () {
        $(this).find(".submenu").fadeIn("slow");
    }
);

var timer = 0;
function animate_me() {
    $(this).find(".submenu").stop().fadeOut("slow");
}
$(function(){
    $("#menu ul li").mouseout(function(){
        timer = setTimeout("animate_me()", 300); // start timer when mouse is moved in
    }, function() {
        clearTimeout(timer); // stop it if mouse is moved out
    });
});

Как отложить затухание, пока меню ul li не отключится на две секунды?

Answer 1

Используйте плагин HoverIntent для jQuery .Он делает именно то, что вам нужно и многое другое.

В частности, функция тайм-аута предоставляет эту возможность.Пример использования:

function showIt() { $(this).find(".submenu").fadeIn("slow"); }
function hideIt() { $(this).find(".submenu").stop().fadeOut("slow"); }

$("#menu ul li").hoverIntent({
    over: showIt,
    out: hideIt,
    timeout: 300 /*ms*/
});

Из документации

timeout :

Простая задержка, в миллисекундах, перед "out"функция называется.Если пользователь вернется к элементу до истечения времени ожидания, функция «out» не будет вызываться (и не будет вызываться функция «over»).Это прежде всего для защиты от неаккуратных траекторий, которые временно (и неумышленно) отнимают пользователя от целевого элемента ... давая ему время вернуться.Время ожидания по умолчанию: 0

Answer 2

Fist of all, mouseout, принимает только один параметр.Вам нужно использовать .hover(), если вы хотите использовать его таким образом.Тогда вы можете просто использовать .dealy() для достижения своей цели, .stop(true,true) очищает эту задержку

, вот демо: http://jsfiddle.net/meo/zTTFJ/