jQuery animate when mouseover and mouseout
<p>I have the following code which moves a <code>DIV block</code> 20px down on mouseover:</p>

<pre><code>$('.outerDiv').mouseover(function()
{       
    $(this).animate({marginTop: "+=20px",},500);
});

$('.outerDiv').mouseout(function()
{       
    $(this).animate({marginTop: "-=20px",},500);
});
</code></pre>

<p>The div contains another <code>div</code> inside. The problem is that when the mouse is over the inner <code>div</code>, the mouse out event occurs and the <code>div</code> block shift up <code>20px</code>. I am wondering if there is a way to only fire the mouseout event if the mouse is only outside the outer <code>div</code>.</p>

<p>Here is the HTML structure:</p>

<pre><code>&lt;div class='outerDiv'&gt;
    &lt;div class='innerDiv'&gt;
       bla bla bla
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
