Question

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

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

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 2

我的第一个猜测是使用

$(this).animate

而不是

$this.animate

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

使用jquery animate方法缩放图像

3 个答案: