title: jQuery animate(), expand a div
body: <p>HTML:</p>
  
  <pre><code>&lt;div id="box0"&gt;&lt;img src="http://s14.postimg.org/9x1nrefy5/A_Sunday_on_La_Grande_Jatte.png" id="pic0"&gt;&lt;/div&gt;
  &lt;div id="box1"&gt;&lt;img src="http://s14.postimg.org/hbqzjs1tp/starry_night.png" id="pic1"&gt;&lt;/div&gt;
  &lt;div id="box2"&gt;&lt;img src=http://s14.postimg.org/x7ftn2se5/mona_lisa.png" id="pic2"&gt;&lt;/div&gt;
  &lt;div id="box3"&gt;&lt;img src="http://s14.postimg.org/k4k73t265/the_scream.png" id="pic3"&gt;&lt;/div&gt;  
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>        * {
              padding: 0px;
              margin: 0px;
              z-index: 0;
          }
          img {
              position: relative;
          }
          div {
              position: absolute;
              overflow: hidden;
              border: 8px solid #61260D;
          }
          #box0 {     /* A Sunday on La Grande Jatte */
              height: 150px;
              width: 120px;
              top: 300px;
              left: 100px;
          }
          #pic0 {
              left: -15px;
              top: -15px;
              height: 337px;
              width: 500px;
          }
          #box1 {     /* Starry Night */
              height: 100px;
              width: 400px;
              top: 150px;
              left: 100px;
          }
          #pic1 {
              left: -35px;
              top: -20px;
              height: 300px;
              width: 480px;
          }
          #box2 {     /* Mona Lisa */
              height: 150px;
              width: 100px;
              top: 190px;
              left: 50px;
          }
          #pic2 {
              left: -20px;
              top: -20px;
              height: 300px;
              width: 198px;
          }
          #box3 {     /* The Scream */
              height: 200px;
              width: 160px;
              top: 60px;
              left: 200px;
          }
          #pic3 {
              left: -30px;
              top: -20px;
              height: 400px;
              width: 314px;
          }
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>        var h = [];
          var w = [];
          var left = [];
          var top = [];
          var speed = 300;
  
          for (var i = 0; i &lt; 4; i ++) {
              h[i] = $('#box'+i).css('height');
              w[i] = $('#box'+i).css('width');
              left[i] = $('#pic'+i).css('left');
              top[i] = $('#pic'+i).css('top');
  
          }
          for (var i = 0; i &lt; 4; i ++) {
              $('div').hover(
                  function() {
                      $(this).stop().css({'zIndex':'5'}).animate({
                          height : $(this).children().css('height'),
                          width : $(this).children().css('width')
                      }, speed);
                      $(this).children().animate({
                          left : '0',
                          top : '0'
                      }, speed);
                  },
                  function() {
                      $(this).stop().css({'zIndex':'0'}).animate({
                          height : h[i],
                          width : w[i]
                      }, speed);
                      $(this).children().animate({
                          left : left[i],
                          top : top[i]
                      }, speed);
                  }
              );
          }
  </code></pre>
  
  <p>What I want to do is when the cursor enter a div, the div will expand to the image size and the image embedded will change its location using animate().<br>
  It does expand well, however, the div does not restore its original size when the cursor leaves.<br><br>
  <a href="http://jsfiddle.net/hanglout/dVz6H/7/" rel="nofollow">Here is the demo</a></p>