jQuery Enlarge/Shrink a specific image on MouseOver/MouseOut
<p>I'm using this code with jquery to Enlarge or Shirk an image on HOVER (an image).</p>

<p>The script works great, apart that if a user move on and out very fast the cursor on the image the script continually enlarge the image.</p>

<p>So I would like avoid this and have a way to stop animation properly. Any idea how to solve this? Many thanks!</p>

<pre><code>// Enlarge/Shrink a specific image on MouseOver/MouseOut
            $('#photos').find('img').hover(function() {
                // Get size for selecte image
                $this = $(this);
                originalWidth = $this.width();
                originalHeight = $this.height();
                scale = 20;
                speed = 250;
                newWidth = originalWidth + originalWidth/100*scale;
                newHeight = originalHeight + originalHeight/100*scale;
                $this.animate({         // Enlarge image on MouseOver
                    width : newWidth,
                    height : newHeight
                    },speed);
                }, function () {        // Shrink image on MouseOut
                $this.animate({
                    width : originalWidth,
                    height: originalHeight
                    },speed);
            }); // end hover    
</code></pre>
