如何将css3过渡缓和转换为jquery缓动函数?

时间:2012-09-16 19:14:19

标签: jquery css3 css-transitions easing

我也为现代浏览器和旧浏览器制作滑块。我使用translate3d和transition来在支持css3的现代浏览器中制作动画。我为旧浏览器使用2d top,left和easing函数。我从这里使用css3缓动:

http://matthewlein.com/ceaser/

我想将它转换为javascript函数以便在旧浏览器上使用。我知道那里有很多缓动功能,但我只是想知道如何转换。有可能吗?

2 个答案:

答案 0 :(得分:9)

您可以在jQuery中使用Cubic Bezier Easings的jQuery Bez插件:

演示: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​

插件:https://github.com/rdallasgray/bez

答案 1 :(得分:3)

我知道答案已被接受,但我想分享另一个适合放宽动画的优秀jQuery插件。

http://ricostacruz.com/jquery.transit/