画像をセンターズームするのに適していますか？

Question

拘束ボックスのサイズを一定に保ちながら、マウスオーバー時に画像をズームインまたはズームアウトするための小さなjquery関数をまとめました。ここ

デモを：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

最も簡単な1が

が、C

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

//

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

に静的な値を変更することですヒーリーの解決策は最適です