add or remove class with delay

add or remove class with delay using css and js

by Abhay Singh

HTML

<div id="date_1" class="dateThing">Date 1</div>
<div id="date_2" class="dateThing">Date 2</div>
<div id="date_3" class="dateThing">Date 3</div>

CSS

.dateThing {
    padding: 10px;
    margin: 20px;
    float: left;
    border: 1px solid #ccc;
}

.door {
    background: #cea;
}
.doorstatic {
    background: #fea;
}

JavaScript

jQuery(function(){
    $(".dateThing").hover(
    
    function () {
        var $this = $(this);
        var 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);
        var timer = $this.data("timer") || 0;
        clearTimeout(timer);
        $this.removeClass("door doorstatic");
    });

});