延迟在悬停中添加一个等级2秒()

时间:2011-12-09 11:11:12

标签: jquery

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

3 个答案:

答案 0 :(得分:12)

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

答案 1 :(得分:2)

javascript的setTimeout方法可用于在设定的延迟(以毫秒为单位)后运行您指定的代码。

试试这个:

var timeout;
$("#date_1").hover(
    function () {
        $(this).addClass("door");
        timeout = setTimeout(function() { $(this).addClass("doorstatic"); }, 2000);
    }, function () {
        clearTimeout(timeout);
        $(this).removeClass("door doorstatic");
    }
);

答案 2 :(得分:2)

实际上,您只需致电jQuery's delayaddClass来电。

这样的东西
 $(this).addClass("door").delay(2000).addClass("doorstatic", "slow"); 

应该这样做。