延迟在hover()中添加类2秒 [英] Delay adding a class for 2 seconds in hover()

问题描述

如何在addClass();上使用缓动或时间延迟?

How do I use easing or time delay on 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")

这里的问题是，如果将鼠标悬停在鼠标悬停两秒钟之前，您的元素上仍将具有类doorstatic.

The problem here is that if you mouseover and before two seconds mouse out you will still have the class doorstatic on you element.

解决方法:

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

Created a live example of the solution at jsFiddle.

这篇关于延迟在hover()中添加类2秒的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！