jQuery animate(), expand a div -

html:

<div id="box0"><img src="http://s14.postimg.org/9x1nrefy5/a_sunday_on_la_grande_jatte.png" id="pic0"></div> <div id="box1"><img src="http://s14.postimg.org/hbqzjs1tp/starry_night.png" id="pic1"></div> <div id="box2"><img src=http://s14.postimg.org/x7ftn2se5/mona_lisa.png" id="pic2"></div> <div id="box3"><img src="http://s14.postimg.org/k4k73t265/the_scream.png" id="pic3"></div>   

css:

        * {             padding: 0px;             margin: 0px;             z-index: 0;         }         img {             position: relative;         }         div {             position: absolute;             overflow: hidden;             border: 8px solid #61260d;         }         #box0 {     /* 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 {     /* scream */             height: 200px;             width: 160px;             top: 60px;             left: 200px;         }         #pic3 {             left: -30px;             top: -20px;             height: 400px;             width: 314px;         } 

javascript:

        var h = [];         var w = [];         var left = [];         var top = [];         var speed = 300;          (var = 0; < 4; ++) {             h[i] = $('#box'+i).css('height');             w[i] = $('#box'+i).css('width');             left[i] = $('#pic'+i).css('left');             top[i] = $('#pic'+i).css('top');          }         (var = 0; < 4; ++) {             $('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);                 }             );         } 

what want when cursor enter div, div expand image size , image embedded change location using animate().
expand well, however, div not restore original size when cursor leaves.

here demo

made working fiddle you: http://jsfiddle.net/u4nrq/1/

edit: fix return size constant:

    var speed = 300;      (var = 0; < 4; ++) {         $("#box" + i).attr("stored_h",  $("#box" + i).css('height'));         $("#box" + i).attr("stored_w",  $("#box" + i).css('width'));         $("#box" + i).attr("stored_left",  $("#box" + i).children().css('left'));         $("#box" + i).attr("stor_top",  $("#box" + i).children().css('top'));     }  $('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 : $(this).attr("stored_h"),             width : $(this).attr("stored_w")         }, speed);         $(this).children().animate({             left : $(this).attr("stored_left"),             top : $(this).attr("stored_top")         }, speed);     } ); 

fiddle: http://jsfiddle.net/u4nrq/9/