Javascript jquery animate jerky-有更好的用于缩放图像的库吗？

我注意到，每当我长时间使用jqueryanimate时，小改动的动画都会变得异常急促！解决这一问题的唯一方法似乎是大大缩短时间并扩大规模。但在一些项目中，这是不可能的

我研究了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转换

---

实例：（悬停图像）

为什么不使用简单的CSS转换，下面是一个例子

---

为什么不使用简单的CSS转换呢

---

为了获得最平滑的外观和最好的性能，我绝对推荐使用css缩放变换

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

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

下面是一个演示：

---

它在iOS上的Chrome、FF、IE10、Opera和Safari中可平滑缩放。

为了获得最平滑的外观和最佳性能，我绝对推荐使用css缩放变换

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

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

下面是一个演示：

---

它在iOS上的Chrome、FF、IE10、Opera和Safari中可以平滑缩放。

当我将0.2秒更改为1秒时，你看到动画有多不稳定了吗？为什么要用1来制作动画？用户不去你的网站看动画，它必须是最小的。如果我想要慢动画？“用户不去你的网站看动画，它必须是最小的。”确切地说，慢速动画对眼睛的干扰较小。当我将0.2秒更改为1秒时，你看到动画有多急促了吗？为什么要用1来制作动画？用户不去你的网站看动画，它必须是最小的。如果我想要慢动画？“用户不去你的网站看动画，它必须是最小的。”确切地说，缓慢的动画对眼睛的干扰较小。你有背景转换的经验吗？我注意到在一些网站上，他们使用这种技术而不是直接处理图像。你是说使用背景大小属性吗？以我的经验来说，这不是那么顺利。这类似于仅仅为图像的widht/height属性设置动画。是的，我们刚刚测试了它，它甚至比jquery animate（）更值得一试：）你有背景转换的经验吗？我注意到在一些网站上，他们使用这种技术而不是直接处理图像。你是说使用背景大小属性吗？以我的经验来说，这不是那么顺利。这类似于仅仅为图像的widht/height属性设置动画。是的，我刚刚测试了它，它甚至比jquery animate（）更有价值：）我真的非常推荐greensock tweening库！我真的很推荐格林斯托克特温图书馆！

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