title: jQuery grow image in place on mouseover
body: <p>I've got a bunch of gallery images that I display as small thumbnails (about 50px big). When the user mouses over the small image a larger one 'grows' out of it (up to 100px) so they can see it a little better.</p>
  
  <p>I've got this code, which works out where the image is on the page, applies another image (absolutely positioned) over the top, then grows it.</p>
  
  <pre><code>$(document).on("mouseover", "img.grow", function() {
      var iid = $(this).attr("id");
      var isr = $(this).attr("src");
      var loc = $(this).offset();
      $("body").append('&lt;img class="grown" id="o' + iid + '" src="' + isr + '" style="position: fixed; z-index: 1505; top: ' + loc.top + 'px; left: ' + loc.left + 'px; width: 33px;" /&gt;');
      $(".grown").animate({
          width: '100px', 
          marginLeft: '-25',
          marginTop: '-15'
      }, 250);
  }).on("mouseleave", "img.grow", function() {
      var iid = $(this).attr("id");
      $("img#o" + iid).fadeOut(100, function() {
          $(this).remove(); 
      });
  });
  </code></pre>
  
  <p>I'm getting the dreaded 'bounce' though - as the new image is placed on top of the original, it causes 'mouseleave' to fire. Obviously I don't want this to happen, but I need to use an absolutely positioned image to stop the layout being jiggled around.</p>
  
  <p>Any ideas?</p>