使用jquery動畫方法縮放圖像

Question

我想使用jQuery作爲css3轉換做圖像縮放圖像。 ，所以我在這裏寫了一個腳本這是

(function(){ 
    $('.img_container img').on('mouseover',function(){ 
     var $this = $(this), 
      width = $this.attr('width'), 
      height = $this.attr('height'), 
      new_width = (width + 10)+'px', 
      new_height = (height + 10)+'px'; 

     $this.animate({'width':new_width, 
         'height':new_height, 
         'top':'-10px', 
         'left':'-10px'},{ 
          duration:300, 
          }); 
     }); 
    })(); 

鼠標懸停在圖像上有增加的寬度和高度比10px的越來越異常 任何幫助，請

我能寫另一個腳本。

(function(){ 
    var factor = 15; 

$('.img_container img').on('mouseover',function(){ 

     var $this = $(this), 
     height = $this.height(), 
     width = $this.width(); 
    $(this).animate({ 
     top: height - factor, 
     left: width - factor, 
     width: width + factor, 
     height: height +factor 
    },200); 
}); 
$('.img_container img').on('mouseleave',function(){ 

     var $this = $(this), 
     height = $this.height(), 
     width = $this.width(); 
    $(this).animate({ 
     top: height + factor, 
     left: width + factor, 
     width: width - factor, 
     height: height - factor 
    },200); 
}); 

})(); 

不過，如果我和縮小圖像的多次移動鼠標 真快，圖像會「跳動」，因爲它抓住每個事件和 不能顯示他們足夠快。這就像是動畫的延遲，以解決這個問題。

Answer 1

我的第一個猜測將使用

$(this).animate 

，而不是

$this.animate 

Answer 2

var factor = 2; 

$('.img_container img').on('mouseover',function(){ 
    $(this).animate({ 
     top: '-=' + $(this).height()/factor, 
     left: '-=' + $(this).width()/factor, 
     width: $(this).width() * factor 
    }); 
}); 

特定的因素，請參閱本Fiddle

Answer 3

(function(){ 
    $('.img_container img').on('mouseover',function(){ 
     var 
      width = $(this).css('width'), 
      height = $(this).css('height'), 
      new_width = (width + 10)+'px', 
      new_height = (height + 10)+'px'; 

     $(this).animate({'width':new_width, 
         'height':new_height, 
         'top':'-10px', 
         'left':'-10px'},{ 
          duration:300, 
          }); 
     }); 
    })();