我也为现代浏览器和旧浏览器制作滑块。我使用translate3d和transition来在支持css3的现代浏览器中制作动画。我使用旧版浏览器的二维顶部,左侧和缓动功能。我使用CSS3从这里宽松:如何转换css3转换缓动jQuery缓动功能?
http://matthewlein.com/ceaser/
我想将其转换为JavaScript函数使用旧的浏览器。我知道那里有许多缓动功能,但我只想知道如何转换。可能吗?
我也为现代浏览器和旧浏览器制作滑块。我使用translate3d和transition来在支持css3的现代浏览器中制作动画。我使用旧版浏览器的二维顶部,左侧和缓动功能。我使用CSS3从这里宽松:如何转换css3转换缓动jQuery缓动功能?
http://matthewlein.com/ceaser/
我想将其转换为JavaScript函数使用旧的浏览器。我知道那里有许多缓动功能,但我只想知道如何转换。可能吗?
您可以在jQuery中使用jQuery Bez插件三次Bezier渐变效果:
演示: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
你错过了我的问题。这只是在css3浏览器上工作,我需要将css3 easing转换为js,以使其在IE浏览器等旧浏览器上工作:) – StoneHeart
我redid我的答案,对不起,我错过了。 –
太棒了!这正是我想要的。你做了我的一天:) – StoneHeart
我知道答案已经接受,但我想分享另一个很好的jQuery插件适合缓动动画。
我想你可以写一个函数来效仿。你可以使用Easing插件,只使用预建功能? http://gsgd.co.uk/sandbox/jquery/easing/ – Blender
已经有一个jQuery库,它完全做你正在做的事[jQuery Transit](http://ricostacruz.com/jquery.transit/)你可以使用它或至少看看源:) – Andreas
+1酷动画工具。 –