Jquery .on("mouseenter") - wait 2 seconds then do action
<p>I have a script that shows hidden text when you hover over a div. But I want it to be delayed 2 seconds, and if the user moves the mouse away before 2 seconds I want nothing to be shown.</p>

<p>How do I do this?</p>

<p><strong>What I have:</strong> <a href="http://jsfiddle.net/ZhrJT/" rel="nofollow">http://jsfiddle.net/ZhrJT/</a></p>

<p>-</p>

<p><strong>HTML:</strong></p>

<pre><code>&lt;body&gt;
    &lt;div&gt;hover this&lt;/div&gt;
    &lt;p class="hidden"&gt;unhidden!!&lt;/p&gt;
&lt;/body&gt;
</code></pre>

<p><strong>JS:</strong></p>

<pre><code>$("body").on("mouseenter", "div", function(){
    $("p").removeClass("hidden");
}).on("mouseleave", "div", function(){
    $("p").addClass("hidden");
});
</code></pre>

<p><strong>CSS:</strong></p>

<pre><code>div {
    background-color:red;
    height:100px;
}

p.hidden {
    display:none;  
}

p {
    background-color:yellow; 
    height:100px;   
}
</code></pre>
