如何将CSS3过渡缓动转换为jQuery缓动函数？

Question

我正在为现代浏览器和旧版浏览器制作幻灯片。我在支持CSS3的现代浏览器中使用translate3d和transition来制作动画。对于旧版浏览器，我使用2D top、left和easing函数。我从这里使用CSS3 easing：http://matthewlein.com/ceaser/。

我想将其转换为JavaScript函数以在旧版浏览器上使用。我知道有很多缓动函数可用，但我只想知道如何进行转换。这是可能的吗？

- StoneHeart

---

我认为你需要编写一个函数来模拟它。你能使用缓动插件，仅使用预构建的函数吗？http://gsgd.co.uk/sandbox/jquery/easing/ - Blender

已经有一个jQuery库可以完全实现你想要做的事情 jQuery Transit 你可以使用它或者至少查看一下源代码 :) - Andreas

+1 酷炫动画工具。 - A.M.K

@Andreas，将其写成答案，获得信用分！ - A.M.K

@A.M.K 这并不是 TOs 问题的完全正确答案，只是解决方案的一种捷径。 - Andreas

这可能不是所要求的“确切”答案，但我认为这比手动将缓动转换为JS更好的解决方案。 - A.M.K

Answer 1

你可以使用jQuery Bez插件来实现jQuery中的三次贝塞尔缓动效果：

演示：http://jsfiddle.net/SO_AMK/sbZ7a/

jQuery：

$("#box").click(function() {
    $(this).animate({
        "margin-left": 200
    }, 2000, $.bez([0.685, 0.595, 0.020, 0.720]));
});

// Take the Ceaser output and put the values in, in order, like above. i.e. cubic-bezier(0.685, 0.595, 0.020, 0.720) would end up as the above value​

Plugin: https://github.com/rdallasgray/bez

- A.M.K

---

你没有理解我的问题。那只适用于CSS3浏览器，我需要将CSS3缓动转换为JS以使其在旧浏览器（如IE）上运行 :) - StoneHeart

我重新修改了我的回答，抱歉，我漏掉了那个。 - A.M.K

太好了！那正是我想要的。你让我的一天都变得美好 :) - StoneHeart

类型错误：未定义的函数（评估'$ .bez'） - wonderwhy

Answer 2

我知道答案已经被接受了，但我想分享另一个非常适合缓动动画的jQuery插件。 http://ricostacruz.com/jquery.transit/

- Endre Simo

---

这是我在评论中提到过的库，也是 A.M.K. 在他答案的第一个版本中使用的库。这个库的问题是，在请求的情况下它不会在旧版浏览器中执行缓动动画 :) - Andreas