JS setTimeout и функция jQuery

Question

У меня есть эта функция, и мне интересно, почему setTimeout не работает:

$(document).ready(function() {      
    $('.sliding .text').css("top","130px")     

    $('.sliding').mouseenter(function() {       
        mouseOverTimer = setTimeout(function() {
            $(this).find('.text').animate({"top": "0"}, 200);             
        }, 500);       
    })
    .mouseleave(function() { 
        $(this).find('.text').delay(500).animate({"top": "130px"}, 400); 
    });       
});     

Я попытался обернуть событие mouseenter тайм-аутом, но это не казалось хорошей идеей. Я просто хочу, чтобы анимация на указателе мыши работала только после того, как мышь на нее по крайней мере полсекунды.

В качестве альтернативы, есть ли лучший способ сделать это в jQuery?

Answer 1

Значение this в вашем обработчике тайм-аута не будет таким, как вы думаете.Добавьте явную переменную:

   $('.sliding').mouseenter(function() {   
        var self = this;    
        mouseOverTimer = setTimeout(function() {
            $(self).find('.text').animate({"top": "0"}, 200);             
        }, 500);       
    })

Также вы должны объявить "mouseOverTimer" как локальную переменную за пределами кода установки обработчика (то есть как локальную переменную обработчика "ready") и затем отмените тайм-аут в обработчике "mouseleave":

    var mouseOverTimer = null;

   $('.sliding').mouseenter(function() {   
        var self = this;    
        mouseOverTimer = setTimeout(function() {
            $(self).find('.text').animate({"top": "0"}, 200);             
        }, 500);       
    })
   .mouseleave(function() { 
        $(this).find('.text').delay(500).animate({"top": "130px"}, 400); 
        cancelTimeout(mouseOverTimer);
    });       

Когда я смотрю на это, я почти уверен, что код "mouseleave" не совсем то, что вам нужно;в частности, я думаю, что задержка, вероятно, не нужна.Однако я не уверен на 100% в том, как вы хотите, чтобы все выглядело.

Answer 2

Еще один способ сделать это

mouseIn = false;
$(document).ready(function() {      
    $('.sliding .text').css("top","130px")     

    $('.sliding').mouseenter(function() {   
        mouseIn = true;  
        mouseOverTimer = setTimeout(function() {
            if(mouseIn==true)
                 $(this).find('.text').animate({"top": "0"}, 200);             
        }, 500);       
    })
    .mouseleave(function() {
        mouseIn=false;
        $(this).find('.text').delay(500).animate({"top": "130px"}, 400); 
    });       
});

Answer 3

вы можете попробовать это вместо использования setTimeout:

$(document).ready(function() {      
    $('.sliding .text').css("top","130px")     

    $('.sliding').mouseenter(function() {       
        $(this).find('.text').stop().delay(500).animate({"top": "0"}, 200);             
    })
    .mouseleave(function() { 
        $(this).find('.text').stop().animate({"top": "130px"}, 400); 
    });       
});

Это задержит анимацию при наведении курсора на 500 мс. Если вы щелкаете мышью, она вызывает stop (), которая убивает ожидающую анимацию и затем возвращает ее в исходное положение. Если он никогда не двигался, анимация отключения мыши также не произойдет (правильно - некуда).

Answer 4

Возможно, я бы упростил задачу следующим образом: на mouseover я бы создал new Date(), getTime() на нем и спрятал в var.Затем на mouseleave вы берете другую дату и снова получаете метку времени.В том же mouseleave проведите оценку: если разница между датой 1 и датой 2 больше 1/2 секунды, вы запускаете свое действие.Иначе, вы сбрасываете дату 1.