jQuery在MouseOver/MouseOut上放大/缩小特定图像

Question

我在jQuery中使用此代码来放大或卸载HOVER上的图像（图像）。

该脚本效果很好，除此之外，如果用户快速移动和移出图像上的光标，脚本会不断放大图像。

所以我想避免这种情况，并有一个方法来正确地停止动画。任何想法如何解决这个问题？非常感谢！

// 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  

Answer 1

我解决使用.stop() 的.stop（）函数这里的问题简单地结束的IMG任何动画开始一个新的人之前，并防止多个动画从在队列中建立。

// 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.stop().animate({   // Enlarge image on MouseOver 
       width : newWidth, 
       height : newHeight 
       },speed); 
      }, function() {  // Shrink image on MouseOut 
      $this.stop().animate({ 
       width : originalWidth, 
       height: originalHeight 
       },speed); 
     }); // end hover   

Answer 2

你应该用css来做。试试看：

<style> 
    #photos img { 
     width: 100%; 
     height: 100%; 
     transition: width 2s, height 2s, transform 2s; 
     -moz-transition: width 2s, height 2s, -moz-transform 2s; 
     -webkit-transition: width 2s, height 2s, -webkit-transform 2s; 
     -o-transition: width 2s, height 2s,-o-transform 2s; 
    } 
    #photos img:hover { 
     width: 200%; 
     height:200%; 
    } 
</style> 
<div id="photos"> 
<img src="http://images.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" /> 
</div>