jquery – 在hover()中延迟添加一个2秒的类

如何在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
    }
);

解决方法

$("#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”)

这里的问题是,如果你鼠标移开并在两秒之前鼠标移出你仍然会在你的元素上有类门.

修复：

$("#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创建了解决方案的实例.