1

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

我研究了css转换。它并没有提供更好的结果。动画本身更好，但是 Firefox 非常生涩，并且在 chrome 动画中完成并不太平滑。

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

这是我的动画：

$('.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/ （悬停图像）

4

2 回答 2

1

为什么不使用简单的 CSS 过渡，这里有一个演示。

<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;
}
于 2013-09-20T06:55:05.800 回答
0

为了获得最平滑的外观和最佳性能，我肯定会推荐使用 css 比例变换。

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

-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 中平滑扩展。

于 2013-09-20T07:51:43.750 回答