Как правильно настроить hover()?

Question

[Сергей]

Вообщем есть сетка из блоков, наведя курсор на какой либо из них выполняется определенный эффект, проблема в том что если провести мышкой например от 1-го блока до 5-го, то поскольку курсор прошел через все 5 блоков, эффект выполнится у всех, а нужно чтобы только у 5-го. Другими словами как можно сделать чтобы hover не срабатывал в случаи когда мышку на блок не наводят, а просто проводят через него ?
То есть нужно определить задержался ли курсор на блоке дольше например одной секунд и только тогда выполнять hover эффект.

Answer 1

[Дмитрий Беляев]

по событию mouseover создаем timeout и сохраняем указатель на него в переменную
по событию mouseout удаляем таймаут

пример в виде плагина:

!function($) {
    $.fn.hoverWithTimeout = function(timeout, callback) {
        $(this).each(function() {
            var $this = $(this);
            var timer;
            $this.on('mouseover', function(e) {
                timer = setTimeout(function() {
                        callback.call($this, e);
                }, timeout);
            });
            $this.on('mouseout', function() {
                clearTimeout(timer);
            });
        });
    };
}(jQuery);