更好的方式來中心縮放圖像？

Question

我放在一起的一個小jquery函數來放大和縮小mouseover上的圖像，同時保持約束框的大小不變。

演示在這裏：http://jsfiddle.net/q9jHu/

它的偉大工程，但如果你很快輕搖光標的圖像之間，它會失控。腳本在中等縮放時不正確地存儲大小。我試過在公式中加入.stop()，但似乎無法修復這個故障。

我猜我應該存儲的數據.each()而不是鼠標懸停，但我不知道如何做到這一點。

任何想法？

Answer 1

看看這裏 http://jsfiddle.net/q9jHu/4/

$('.pixbox img').on({ 
    mouseover: function(){ 
     var $scale = 1.5; 
     if (!$(this).data('w')) 
     { 
      $(this).data('w', $(this).width()) 
        .data('h', $(this).height()); 
     } 
     $(this).stop(true).animate({ 
      width: $(this).data('w')*$scale, 
      height: $(this).data('h')*$scale, 
      left: -$(this).data('w')*($scale - 1)/2, 
      top: -$(this).data('h')*($scale - 1)/2 
     }, 'fast'); 
    }, 
    mouseout: function(){ 
     $(this).stop(true).animate({ 
      width: $(this).data('w'), 
      height: $(this).data('h'), 
      left: 0, 
      top: 0 
     }, 'fast'); 
    } 
}); 

Answer 2

最簡單的一種是改變

var $w = $(this).width(); 
var $h = $(this).height(); 

到

var $w = 120; 
var $h = 180; 

//靜態值

但是C heery的解決方案是最佳