How to solve this annoying jQuery mouse hover issue?
<p>I'm trying to do something that <strong>should</strong> be very simple, but it's causing this weird problem. Basically I have a bunch of identical divs on a page, each div has a nested div and paragraph content within that nested div. The nested div and all it's content is initially hidden using css. When the user hovers over the main div the nested div and all it's content fades into view. </p>

<p>It's working fine up to this part...</p>

<p>Now when the user's mouse leaves the div the nested div is once again hidden. Problem is when you move your mouse eratically over the various divs really fast back and forth the nested divs for some ceases to dissapear but stays in view. How to solve this?</p>

<p>Here is an example  of the effect I'm trying to achieve, without copying their code :) </p>

<pre><code>http://www.crackpixels.com/
</code></pre>

<p>Here is my code, you can run it as is, everything is linked absolute:</p>

<pre><code>&lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"&gt;&lt;/script&gt;

&lt;script&gt;
$(document).ready(function() {

    // when user hovers over box
    $('.box').mouseover(function() {
        $(this).children('div').fadeIn('fast');
    });

    // when user's mouse leaves box
    $('.box').mouseleave(function() {
        $(this).children('div').hide();
    });

});
&lt;/script&gt;

&lt;style&gt;
.box {
    padding: 5px;
    float: left;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    background: #F5F5F5;
    margin: 0 10px 0;
}
.box div {

    display: none; /* hide initially */

    position: absolute;
    width: 288px;
    height: 175px;
    margin: -175px 0 0;
    background: #444;
    color: #fff;
}
&lt;/style&gt;

&lt;div class="box"&gt;
    &lt;img src="http://www.google.com/images/logos/ps_logo2.png" height="175" width="288" /&gt;
    &lt;div&gt;
        &lt;p&gt;
            Hello world foo bar foo&lt;br /&gt;
            Hello world foo bar foo&lt;br /&gt;
            Hello world foo bar foo&lt;br /&gt;
            Hello world foo bar foo&lt;br /&gt;
            Hello world foo bar foo&lt;br /&gt;
            Hello world foo bar foo
        &lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;&lt;!-- box --&gt;

&lt;div class="box"&gt;
    &lt;img src="http://www.google.com/images/logos/ps_logo2.png" height="175" width="288" /&gt;
    &lt;div&gt;
        &lt;p&gt;
            Hello world foo bar foo&lt;br /&gt;
            Hello world foo bar foo&lt;br /&gt;
            Hello world foo bar foo&lt;br /&gt;
            Hello world foo bar foo&lt;br /&gt;
            Hello world foo bar foo&lt;br /&gt;
            Hello world foo bar foo
        &lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;&lt;!-- box --&gt;

&lt;div class="box"&gt;
    &lt;img src="http://www.google.com/images/logos/ps_logo2.png" height="175" width="288" /&gt;
    &lt;div&gt;
        &lt;p&gt;
            Hello world foo bar foo&lt;br /&gt;
            Hello world foo bar foo&lt;br /&gt;
            Hello world foo bar foo&lt;br /&gt;
            Hello world foo bar foo&lt;br /&gt;
            Hello world foo bar foo&lt;br /&gt;
            Hello world foo bar foo
        &lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;&lt;!-- box --&gt;

&lt;div class="box"&gt;
    &lt;img src="http://www.google.com/images/logos/ps_logo2.png" height="175" width="288" /&gt;
    &lt;div&gt;
        &lt;p&gt;
            Hello world foo bar foo&lt;br /&gt;
            Hello world foo bar foo&lt;br /&gt;
            Hello world foo bar foo&lt;br /&gt;
            Hello world foo bar foo&lt;br /&gt;
            Hello world foo bar foo&lt;br /&gt;
            Hello world foo bar foo
        &lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;&lt;!-- box --&gt;

&lt;div class="box"&gt;
    &lt;img src="http://www.google.com/images/logos/ps_logo2.png" height="175" width="288" /&gt;
    &lt;div&gt;
        &lt;p&gt;
            Hello world foo bar foo&lt;br /&gt;
            Hello world foo bar foo&lt;br /&gt;
            Hello world foo bar foo&lt;br /&gt;
            Hello world foo bar foo&lt;br /&gt;
            Hello world foo bar foo&lt;br /&gt;
            Hello world foo bar foo
        &lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;&lt;!-- box --&gt;
</code></pre>
