jQuery Easing 的最简单使用方法

导入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/
对于想深入研究和只需要效果的朋友，这演示站点绝对是最好的。所有的效果一览还有上图示范的动画参数曲线。

 

如果你曾经使用过这个插件，下面的话就没有必要看了。直接去查看曲线及效果，运用到自己的站点吧。