Задержка jQuery при проблеме с мышью

Question

Задержка jQuery при проблеме с мышью

0

У меня возникла проблема при использовании функции SetTimeout.

У меня есть ящик, и когда вы его наводите, он становится синим. Если вы оставите его, он вернется к красному с задержкой в 1 секунду.

Однако проблема заключается в том, что, если наведите указатель мыши на поле, оставьте его, а затем быстро переверните его еще до 1 секунды, он немного покраснеет, а затем снова станет красным.

Идея заключается в том, что он должен оставаться синим и только поворачиваться на красный, если вы покидаете коробку более чем на 1 секунду. Надеюсь вы понимаете меня :)

Почему это происходит?

Я действительно не знаю, почему.

Вот мой код jQuery:

$('.box').hover(function() {
    $('.box').css({'background' : 'blue'});
}, function() {
    setTimeout(test, 1000);
    function test() {
        $('.box').css({'background' : 'red'});
    }
});

Я попытался выполнить поиск в Google и нашел следующее: $(".box").stop(true,true).delay(1000).css({'background': 'red'}); а также:

$('.box').hover(function() {
    $('.box').css({'background' : 'blue'});
}, function() {
    $('.box').delay(1000).queue( function(next){ 
        $('.box').css({'background' : 'red'});
        next(); 
    });
});

Но никто, кажется, не работает должным образом.

Может кто-нибудь, пожалуйста, помогите мне :)?

Спасибо - TheYaXxE

Пример скрипки

TheYaXxE 20 март 2014, в 14:24

Источник

Теги:

jquery

delay

2 ответа

1

Используя обработчик задержки и ввода/вывода, вы можете использовать:

ДЕМО jsFiddle

$('.box').hover(function (e) {
    var delay = e.originalEvent.type === "mouseover" ? 0 : 1000;
    $(this).finish().delay(delay).queue(function () {
        $(this).css({
            'background': e.originalEvent.type === "mouseover" ? 'blue' : 'red'
        });
    });
});

A. Wolff 20 март 2014, в 10:50

Ещё вопросы

adeneo · Accepted Answer · 2014-03-20T11-12-00.000Z

Вам нужно будет сохранить таймер, чтобы его можно было очистить при повторном зависании

$('.box').on({
    mouseenter: function() {
        $(this).css('background', 'blue');
        clearTimeout($(this).data('timer'));
    },
    mouseleave: function() {
        var self = this;
        $(this).data('timer', 
            setTimeout(function() {
                $(self).css('background', 'red');
            }, 1000)
        );
    }
});

FIDDLE