使用 jquery animate 方法缩放图像答案

【问题标题】：scale images using jquery animate method使用 jquery animate 方法缩放图像
【发布时间】：2013-05-24 08:54:57
【问题描述】：

我想使用 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,
                           });
        });
    })();

将鼠标悬停在图像上会增加宽度和高度超过 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);
});

})();

但是，如果我多次将鼠标移入和移出图像真的很快，图像会“跳动”，因为它捕捉到了每个事件并且不能足够快地展示它们。这就像动画的延迟。如何解决这个问题。

【问题讨论】：

标签： jquery image-scaling

【解决方案1】：

我的第一个猜测是使用

$(this).animate

而不是

$this.animate

【讨论】：

【解决方案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

【讨论】：

@samthush 然后接受并将 REP 交给他的回答伙伴：] 我这样做了，因为我发现这个解决方案很好。

【解决方案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,
                           });
        });
    })();

【讨论】：