0

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

})();

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

4

3 回答 3

3 
var factor = 2;

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

对于特定因素，请参阅此小提琴

于 2013-05-29T07:43:18.317 回答
0 
(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,
                           });
        });
    })();
于 2013-05-29T07:51:59.403 回答
0

我的第一个猜测是使用

$(this).animate

代替

$this.animate
于 2013-05-29T07:42:58.227 回答