масштаб изображения с использованием метода анимации jquery

Question

Я хочу масштабировать изображения, используя jquery как css3 transform doing. поэтому я написал сценарий здесь

(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, 
          }); 
     }); 
    })();