jQuery hover - Whats wrong with my 'mouseout' script?
<p>I am trying to make a fairly simple navigation for a number of pictures on a page. When the image is 'mouseover' I want the image itself to be 'greyed out' and panel to slide in from the right with some additional details.</p>

<p>This I managed to do with the following jQuery.</p>

<p>Now, what I want is, when the mouse leaves the image, to show the image clearly with slid panel slides backed out.</p>

<p>The strange thing is none of the jquery I tried to use (like fadeOut) are working at all. Here is my script:</p>

<p><strong>html</strong></p>

<pre><code> &lt;div id="home_1" class="home_but"&gt;
    &lt;div class="home_overlay"&gt;&lt;/div&gt;
        &lt;img src="images/home_pic_1.jpg" alt="" width="180" height="188" /&gt;
     &lt;div class="home_sub"&gt;here is some slide in text&lt;/div&gt;
  &lt;/div&gt;
</code></pre>

<p><strong>css</strong></p>

<pre><code>   #home_1 {position:absolute; overflow:hidden; top:82px;}


    .home_overlay {position:absolute; background:#fff; display:none;}
    .home_sub {
    width:150px;
    height:50px;
    background:blue;
    position:absolute;
    left: -1000px;
    top: 70px;
}
</code></pre>

<p><strong>javascript</strong></p>

<pre><code> &lt;script type="text/javascript"&gt; 
 $(document).ready(function() {


   $(".home_1").hover(
      function () {
    var img = $(this).children('img');
        $(".home_overlay",this).height(img.height());
        $(".home_overlay",this).width(img.width());
        $(".home_overlay",this).fadeTo('slow', 0.5);
        $(".home_sub",this).css('left',img.width());
        $(".home_sub",this).css('top',(img.height()/2)-25);
        varNewPos = img.width() - 150 +"px"
        //alert(varNewPos);
        $(".home_sub",this).animate({left:varNewPos});
      }, 
      function () {
$(".home_overlay",this).fadeOut(fast);
              }
   );

 });
&lt;/script&gt;
</code></pre>

<p>The mouseover bit works fine but on mouseout nothing happens. Then I found that using </p>

<pre><code>$(".home_overlay",this).css('display','none');
</code></pre>

<p>worked. So did changing any other css propoerties but fadeOut and other jquery animations failed to fire.</p>

<p>What am I doing wrong?</p>

<p>cheers</p>

<p>dog</p>
