jquery - jquery animate メソッドを使用して画像をスケーリングする

Question

css3変換としてjqueryを使用して画像をスケーリングしたい。だから私はここにスクリプトを書いた

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

画像の上にマウスを置くと、幅と高さが 10 ピクセルを超えます。

私は別のスクリプトを書くことができます。

(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

var factor = 2;

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

特定の要因については、このフィドルを参照してください

Answer 2

私の最初の推測は

$(this).animate

それ以外の

$this.animate