JQuery: добавить задержку до эффекта

Question

У меня есть плавающая коробка на моем сайте. Я показываю это на mousenter и скрываю onmouseleave. Как это:

$(box).mouseenter(function(evt) {showBox();});

и

$(what).parent().mouseleave(function(evt) {hideBox();});

Когда я выполняю быстрое перемещение мышью по «ящику», оно появляется. Как не показать это в таком случае? Спасибо.

Answer 1

var showTimer;

$( box ).hover( function(){
    // wait .5 sec to show the box
    showTimer = setTimeout( showBox, 500 );

}, function(){
    // wipe timer so that showBox isn't called if < .5 sec
    if( showTimer ){
        clearTimeout( showTimer );
        showTimer = null;
    }

    hideBox();
}

Answer 2

Я нашел плагин bindWithDelay очень полезным для подобных сценариев.

Очень легко написать что-то вроде:

$(box).bindWithDelay("mouseenter", function() { ... }, 500);

Это добавляет задержку в 500 мсек до начала события. Он обрабатывает всю необходимость установки / отмены / сброса таймеров, когда событие срабатывает несколько раз.

(также поддерживается удобная опция throttling для более сложных ситуаций, о которых вы можете прочитать по ссылке)

Answer 3

Оберните вызов функции с помощью setTimeout ()

$(box).mouseenter(function(evt) { setTimeout("showBox()",1000);});

, где 1000 - 1 сек. (1000 миллисекунд = 1 секунда)

Edit:

Это может быть немного сложнее, чем я думал. Вы должны предотвратить его появление, если мышь тоже быстро выскочит.

var t;
$(box).mouseenter(function(evt) { t = setTimeout("showBox()",1000);});
$(box).mouseleave(function(evt) { clearTimeout(t); });
$(what).parent().mouseleave(function(evt) {clearTimeout(t);hideBox();});
function showBox(){
    clearTimeout(t);
    // the rest or your function
}