Задержка добавления класса на 2 секунды в hover ()

Question

Как использовать замедление или задержку на addClass();?

$("#date_1").hover(
    function () {
        $(this).addClass("door");
        $(this).addClass("doorstatic", "slow"); // after 2seconds i want to add this class during the hover
    }, 
    function () {
        $(this).removeClass("door");
        $(this).removeClass("doorstatic"); // both classes are instantly removed when hover off
    }
);

Answer 1

$("#date_1").hover(   
    function () {
        var $this = $(this);

        $this.addClass("door");
        setTimeout(function() {
            $this.addClass("doorstatic");
        }, 2000); // 2000 is in mil sec eq to 2 sec.
    },
    function () {
        $(this).removeClass("door doorstatic");
    }
);

Вы можете группировать свои классы как removeClass("door doorstatic")

Проблема здесь в том, что если вы наведите курсор мыши и до двух секунд наведите курсор мыши, у вас все равно будет класс doorstatic для элемента.

Исправление:

$("#date_1").hover(    
    function () {
        var $this = $(this),
            timer = $this.data("timer") || 0;

        clearTimeout(timer);
        $this.addClass("door");

        timer = setTimeout(function() {
            $this.addClass("doorstatic");
        }, 2000); // 2000 is in mil sec eq to 2 sec.

        $this.data("timer", timer);
    },
    function () {
        var $this = $(this),
            timer = $this.data("timer") || 0;

        clearTimeout(timer);
        $this.removeClass("door doorstatic");
    }
);

Создан живой пример решения на jsFiddle .

Answer 2

На самом деле вы можете просто добавить вызов к задержке jQuery к вам addClass вызов.

Что-то вроде

 $(this).addClass("door").delay(2000).addClass("doorstatic", "slow"); 

должно помочь.*

Answer 3

Метод javascript setTimeout может использоваться для запуска кода, который вы задаете после заданной задержки в миллисекундах.