Delay on mouseout

by Umair Rafiq

HTML

<a href="#" id="test">I am a link for hover</a>

CSS

a {
    margin:20px;
    padding:5px;
    border:1px solid #f00;
    display:inline-block;
}
.hover {
    background:#f00;
    color:#fff;
}

.busy {
    cursor:wait;
    color:#ccc;
}

JavaScript

// Add a .5 second delay on mouseout

$(function()
{
    var delay=1000, setTimeoutConst;
    $("#test").hover(function()
    {var link = $(this);
        $(link).addClass("busy");
        setTimeoutConst = window.setTimeout(function(){
            $(link).addClass("hover");
            $(link).removeClass("busy");
        },  delay);
       
    }, function()
    {
    		clearTimeout(setTimeoutConst);
        $(this).removeClass("busy");
         $(this).removeClass("hover");
    });
});