title: Increase/decrease size of image without changing layout
body: <p>I found this <a href="http://jsfiddle.net/Xhchp/3/" rel="nofollow noreferrer">JSFiddle</a>  in another <a href="https://stackoverflow.com/questions/5870655/image-resizing-with-jquery-animate">post</a> which I think works great for me.</p>
  
  <p>However unlike the example I do not want to clone the image just change the image position and size.</p>
  
  <p>How should I rewrite the code to make this possible?</p>
  
  <p>Here is the code:</p>
  
  <pre><code>    &lt;script type='text/javascript'&gt;//&lt;![CDATA[ 
  $(window).load(function(){
  function ZoomIn(){
      var p = $(this).offset();
      var w = $(this).width();
      var h = $(this).height();
      var $clone = $(this).clone();
      $clone.css({
          position: "absolute",
          left: p.left + "px",
          top: p.top + "px",
          "z-index": 2
      }).appendTo('body');
      $clone.data("origWidth",w);
      $clone.data("origHeight",h);
      $clone.data("origTop",p.top);
      $clone.data("origLeft",p.left);
      $clone.animate({
          top: "-=" + Math.floor(h * 0.5),
          left: "-=" + Math.floor(w * 0.5),
          width: Math.floor(w * 2),
          height: Math.floor(h * 2)
      },function(){
      });
      $clone.click(ZoomOut);
  }
  
  function ZoomOut(){
      var w = $(this).data("origWidth");
      var h = $(this).data("origHeight");
      var t = $(this).data("origTop");
      var l = $(this).data("origLeft");
      $(this).animate({
          top: t,
          left: l,
          width: w,
          height: h
      },function(){
          $(this).remove();
      });
  }
  
  $(function(){
      $('img').click(ZoomIn);
  });
  });//]]&gt;  
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Many thanks.</p>