jquery hover function
<pre><code>var h=0;
var w=0;
    $(".extend").hover(function() {

        //alert(h);
        $(this).css({'z-index' : '999' });
        $(this).addClass("hover").filter(":not(:animated)").stop()
            .animate({
                marginTop: '-110px', 
                marginLeft: '10px', 
                top: '80%', 
                left: '80%',
                width: 387, 
                height: 487,
                padding: '0px' 
            }, 200);
         h=$(this).height();
         w=$(this).width();
        } , function() {
        $(this).css({'z-index' : '0'});
        $(this).removeClass("hover").stop()
            .animate({
                marginTop: '0', 
                marginLeft: '0',
                top: '0', 
                left: '0', 
                width:w,
                height:h,
                padding: '0px'
            }, 400);
    });

&lt;img class="extend" src="a.jpg"&gt;
&lt;img class="extend" src="b.jpg"&gt;
</code></pre>

<p>I have problem with my hover function i can't make the image back to original size if i hover it to a.jpg it expand then i hover over to b.jpg without waiting a.jpg to return to original size it will become bigger and bigger.</p>

<p>How i can hover and expand without shifting the size?</p>
