Fire an event handler after a certain amount of time
<p>What I need is this:</p>

<p>If the user hover the element for more then 1 second, the event will happen, otherwise it should not.</p>

<p>I tried using the <code>setTimeout()</code> but it just delays the event and does not cancel it when the mouse leaves the element.</p>

<p>Are there any other ways to solve this problem?</p>

<pre><code>$(".optionCont").live('mouseover', function(e){
    var $this = $(this);
    setTimeout(function(){
        $(".dropMenuCont").stop(true,true).slideUp(200);
        if($this.next().css("display") == "none"){
            $this.next().stop(true,true).slideDown(200);
        }else{
            $this.next().stop(true,true).slideUp(200);
        }
            e.preventDefault();
            e.stopPropagation();
            return false;

    }, 1000);
});
</code></pre>
