Эффекты Jquery с setTimeout - PullRequest
Новая
       3

Эффекты Jquery с setTimeout

1 голос
/ 10 февраля 2012

ОК, я здесь упускаю что-то фундаментальное, я уверен!Но по жизни я не могу с этим разобраться.

Сценарий

Это простое скрытое меню меню; 

// Setup hover
        var fadeDuration = 200;
        var setDelay;
        $level1Item.hover(function () {
            $(this).addClass('hover').find('.level-2').fadeIn(fadeDuration);
        }, function () {
            $(this).removeClass('hover').find('.level-2').fadeOut(fadeDuration);
        });

И оно отлично работает ... новыпадающий список довольно БОЛЬШОЙ и раздражающий, когда он появляется, все это очень сексуально, когда мышь перемещается сверху вниз по экрану.

Так что я хочу установить таймаут и очистить его от мыши ...

// Setup hover
        var fadeDuration = 200;
        var setDelay;
        $level1Item.hover(function () {
            setDelay = setTimeout("$(this).addClass('hover').find('.level-2').fadeIn(200)", 500);
            //$(this).addClass('hover').find('.level-2').fadeIn(fadeDuration);
        }, function () {
            clearTimeout(setDelay);
            $(this).removeClass('hover').find('.level-2').fadeOut(fadeDuration);
        });

АБСОЛЮТНО НИЧЕГО НЕ ПРОИСХОДИТ !!Я пробовал оповещения в функции тайм-аута, и они работают ... первоначально переменная fadeDuration была неопределенной, но число останавливает ошибку консоли.

Ответы [ 3 ]

3 голосов
/ 10 февраля 2012

Попробуйте изменить вызов setTimeout, чтобы использовать анонимную функцию: 

// Setup hover
var fadeDuration = 200;
var setDelay;
var $item;

$level1Item.hover(function () {
    $item = $(this);
    setDelay = setTimeout(function() { 
        $item.addClass('hover').find('.level-2').fadeIn(200)
    }, 500);
}, 
function () {
    clearTimeout(setDelay);
    $(this).removeClass('hover').find('.level-2').fadeOut(fadeDuration);
});
2 голосов
/ 10 февраля 2012

Когда строка, которую вы передаете setTimeout, имеет значение eval() ed, this равна window, а не объект, который вы ожидаете.будьте осторожны, чтобы сохранить значение this. 

var self = this;
setDelay = setTimeout(function () { 
                          $(self).addClass('hover').find('.level-2').fadeIn(200);
                      }, 500);
1 голос
/ 10 февраля 2012

Вы не можете использовать this в setTimeout -коде, поскольку this зависит от контекста.Поэтому, когда истекает время ожидания, this - это другой this ... плохой английский, но, надеюсь, это имеет смысл.

Кроме того, избегайте использования строк в таймерах;используйте функции вместо.Хотя вы можете использовать строку, которая затем оценивается как JavaScript, обычно это плохая форма по сравнению с простым переносом того же кода в функцию 

var fadeDuration = 200;
var setDelay;
$level1Item.hover(function () {
    var element = $(this);
    setDelay = setTimeout(function() {
        element.addClass('hover').find('.level-2').fadeIn(fadeDuration);
    }, 500);
}, function () {
    clearTimeout(setDelay);
    $(this).removeClass('hover').find('.level-2').fadeOut(fadeDuration);
});
...