title: Problems with mouseover and mouseout
body: <p>I have grid of images, when the mouse is over any given image a larger version of that image becomes an overlay coming the original grid image with a slightly larger version.</p>
  
  <p>Mouseover works great. but mouseout and mouseleave both cause the larger image to instantly fadeout. Whether the mouse is over or not.</p>
  
  <pre><code>        function imageSize(img){
                var theImage = new Image();
                $(theImage).load(function() {
                  var imgwidth = this.width;
                  var imgheight = this.height;
                  var position = img.parent().position()
                  var index = img.parent().index();
  
  
                  ///calculate top
                  var top     = (position.top -((imgheight-img.height())/2));
                  var left    = (position.left -((imgwidth-img.width())/2));
  
  
                  /// place image in img_pop
                  var clone;
                  clone = '&lt;div class="pop_img clone'+index+'"&gt;&lt;/div&gt;';
                  $(clone).insertAfter($('BODY'));
  
  
                  $('.pop_img.clone'+index+'').css({
                      'width'                 :   img.width(),
                      'height'                :   img.height(),
                      'top'                   :   position.top,
                      'left'                  :   position.left,
                      'backgroundImage'       :   'url('+theImage.src+')',
                  });
  
                      $('.pop_img.clone'+index+'').stop().animate({
                          'height'    :   imgheight,
                          'top'       :   top,
                          'width'     :   imgwidth,
                          'left'      :   left,
                      },300,'easeInOutQuad');
  
                });
                theImage.src = img.attr('src');
              }
  
              $('.am-wrapper img').live('mouseenter',function(){
                  imageSize($(this));
              });
  
              $('.am-wrapper img').live('mouseleave',function(){
                  thisIndex = $(this).parent().index();
                  $('.pop_img.clone'+thisIndex+'').fadeOut('200');
              });
  </code></pre>
  
  <p>I ideally want the overlay image to stay visible and in place while the mouse is over the respective grid image. The when the user places mouse of the another grid image, the old overlay fades out.</p>