Animate on hover to scale images issue

Animate on hover to scale images issue

I am not sure why, but when you rollover the image fast it grows and it does not go back to it initial state. Everything seems to be working fine. Except this and when you try to move your mouse fast frm left image to the last, right image and back, everything is messed up.

Here is a URL to the page http://bernerfoods.bolderimage.com/products/coffee-beverages/




  1. $("#rollovers li").hover(
  2.                       function () {            
  3.                         window.imgWidth2 = $(this).children().width();
  4.                         window.imgHeight2 = $(this).children().height();
  5.                         window.enlarge = 1.2;
  6.                         window.imgW_Roll = imgWidth2 * enlarge;
  7.                         window.imgH_Roll = imgHeight2 * enlarge;
  8.                                                          
  9.                         $(this).children('img').stop().animate({ height: imgH_Roll, width: imgW_Roll, top:-20, left:-5}, 500);                 
  10.                         $(this).parent().next().children('img').stop().animate({ left:6}, 500);
  11.                                         
  12.                     },
  13.                   
  14.                       function () {
  15.                                                     
  16.                         $(this).children('img').animate({ height: imgHeight2, width: imgWidth2, top:0, left:0}, 200);
  17.                       
  18.                         $(this).parent().next().children().stop().animate({ left:0}, 500);                                             
  19.                       }
  20.                 );