jQuery Easing 的最简单使用方法

百里俭
2023-12-01

导入js包easing.js,资源有免费下载的


然后写效果:

一种方法就是配合animate,演示代码如下:

function ceshi(){
$('.yqt').animate({left : '0px'},{queue:false,duration:600,easing:"easeOutElastic"});
}

一类是用toggle()、slideUp()、slideDown()、show()、hide()等jQuery内置的动画效果来实现,演示代码如下:

$("#t1").slideUp({
2. duration: 1000,
3. easing: "easeOutBounce"});


jQuery Easing  插件,非常的小。美化排版后是130行左右,要是压缩了那就更小了。这个插件弥补了jquery里面的动画效果的不足,是其动画效果更加强悍。如此强大而且小的插件,如果不好好加以利用,真是浪费。很多国内的朋友就是使用其中的一些效果,几个简单的参数。很少有人整理所有效果的参数。下面是我整理出来的:

linear,swing,jswing,easeInQuad,easeOutQuad,easeInOutQuad,easeInCubic,
easeOutCubic,easeInOutCubic,easeInQuart,easeOutQuart,easeInOutQuart,
easeInQuint,easeOutQuint,easeInOutQuint,easeInSine,easeOutSine,
easeInOutSine,easeInExpo,easeOutExpo,easeInOutExpo,easeInCirc,
easeOutCirc,easeInOutCirc,easeInElastic,easeOutElastic,easeInOutElastic,
easeInBack,easeOutBack,easeInOutBack,easeInBounce,easeOutBounce,easeInOutBounce


一共这么多效果参数。字面意思已经很明白,不过想真正清楚动画的效果还得看演示。




X轴表示时间,Y轴表示的是动画效果的变化。查看这些曲线变化,更利于掌握这个插件的效果。
插件支持站:http://gsgd.co.uk/sandbox/jquery/easing/
效果演示站点:http://james.padolsey.com/demos/jquery/easing/
对于想深入研究和只需要效果的朋友,这演示站点绝对是最好的。所有的效果一览还有上图示范的动画参数曲线。
 
如果你曾经使用过这个插件,下面的话就没有必要看了。直接去查看曲线及效果,运用到自己的站点吧。

 类似资料: