Question

我注意到每当我长时间使用jquery动画时，小变化动画会变得非常生涩！解决这个问题的唯一方法似乎是大大减少时间并扩大规模。但在某些项目中这是不可能的......

我研究了css过渡。它没有提供更好的结果。动画本身更好，但是firefox非常生涩，而镀铬动画的完成并不是那么平滑。

所以我的问题是，是否有其他带有动画引擎的库可以提供平滑的图像缩放？还是有一种我缺少的技术？

这是我的动画：

$('.item a').mouseover(function(){
    //
        var this_img = $(this).find('.img_grayscale');
        var css_w = parseInt(this_img.attr("width"), 10);
        var css_h = parseInt(this_img.attr("height"), 10);
        // 10% of height and width calc here
        var css_p_w = css_w * 10 / 100;
        var css_p_h = css_h * 10 / 100;
        // 
        var css_top = -(css_p_h / 2);
        var css_left = -(css_p_w / 2);
    //
    this_img.stop().animate({ opacity:1 }, 100, function(){
        this_img.animate({width:css_w + css_p_w, height:css_h + css_p_h, top:css_top, left:css_left}, 1200, "linear");
    });
    //this_img.transitionStop().transition({ opacity:1 }, 100, function(){
    //  this_img.transition({ scale:1.05, rotate:0.02 }, 2500, "ease");
    //});
    //
}).mouseout(function(){
    //
        var this_img = $(this).find('.img_grayscale');
        var css_w = parseInt(this_img.attr("width"), 10);
        var css_h = parseInt(this_img.attr("height"), 10);
    //
    this_img.stop().animate({ width:css_w, height:css_h, top:"0", left:"0" }, 1200, "linear", function(){
        this_img.animate({ opacity:0 }, 100);
    });
    //this_img.transitionStop().transition({ scale:1 }, 2500, "ease", function(){
    //  this_img.transition({ opacity:0, rotate:0.02 }, 100)
    //});
    //
});

注释掉的部分是jquery.transit插件测试，这个插件提供了css3过渡。

实例：http://mac.idev.ge:800/test/（悬停图片）

Answer 1

为什么不使用简单的CSS转换，这里是demo。

<img src="some-image.jpg" />

CSS

img {
    width: 400px;
    height: 300px;
    position: absolute;
    top: 100px;
    left: 100px;
    transition: all 0.2s linear;
}
img:hover {
    width: 440px;
    height: 330px;
    top: 85px;
    left: 80px;
}

Answer 2

为了获得最流畅的外观和最佳性能，我肯定会建议使用css scale transform。

但是有一些问题需要注意。似乎有些浏览器试图变得聪明并优化变换，这只会导致图像中的尺寸变化。诀窍是也应用一个小的旋转：

-webkit-transform: scale(1.2, 1.2) rotate(0.1deg);
transform: scale(1.2, 1.2) rotate(0.1deg);

以下是演示：http://jsfiddle.net/g2Qrv/

它可以在iOS上的Chrome，FF，IE10，Opera和Safari中平滑扩展。

jquery animate jerky - 有没有更好的库缩放图像？

2 个答案: