jQuery delay/disable overlay on hover
<p>I'm working with a simple thumbnail overlay script:</p>

<pre><code>    // Hover thumbnail overlay
    $('li.carouselBlock a').hover( function () {
        // Display the overlay
        $(this).find('span.carousel-description').stop( false, true ).delay(500).animate( {'top':'0px'}, 500 ).show();
    },
    function () {
        // Hide the overlay
        $(this).find('span.carousel-description').stop( false, true ).animate( {'top':'-100px'}, 500 );
    });
</code></pre>

<p>I'd like it so if the user glances their mouse over the thumbnail (or off it in fact) the JS doesn't kick in unless the hover has been consistent for around half a second.</p>

<p>Initially I thought this could be solved with jQuery's <code>.delay()</code> method like the other answers I've come across, but then I discovered this will only "delay" the animation (it <em>always</em> kicks in even if the user glances across it) rather than prevent it from kicking in unless the user has hovered for a specified amount of time.</p>
