jQuery Easing—jquery动画效果插件_JS、jQ、TS_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

jQuery Easing—jquery动画效果插件

来源：未知作者：类型：图文教程点击次数：发布时间：2015-08-31 12:05:32

jQuery的自带动画效果animate非常强大，可以做出各种动画效果。唯一缺陷是动画效果过度比较单一。这里，我爱模板网极力推荐一个插件，配合jQuery的animate，做出来意想不到的效果，例如，滚动后来回弹跳等等。运行下面的代码，查看效果（您可以更改里面的easing参数的值，查看不同效果）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery easing效果预览我爱模板网 www.5imoban.net</title> <script src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script> <script src="http://www.5imoban.net/view/jquery/jquery.easing.1.3.js"></script> <style type="text/css"> body,ul,li,img{margin:0; padding:0} div{width:365px; height:198px; overflow:hidden; margin:50px auto; position:relative;} ul{width:1460px; position:absolute; top:0px; left:0px;} li{list-style-type:none;float:left;overflow:hidden; width:365px;} </style> </head> <body> <script> /* easing滚动效果参数合集： swing 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 */ $(function(){ var curPage = 1; //当前版面 var maxPage = 4; //最大版面 var perPage = 365; //每次滚动的距离 var scrollUl = $("ul"); //请更改这里的easing变量的值为上面注释部分的任意一个，查看效果： var easing = "easeOutBounce"; var auto = function(){ //自动滚动 if(curPage >= maxPage){ scrollUl.stop().animate({"left":0},500,easing); curPage = 1; }else{ scrollUl.stop().animate({"left":"-"+perPage*curPage},500,easing); curPage++; } } setInterval(auto,1000); }); </script> <div> <ul> <li><img src="http://www.5imoban.net/view/demoimg/easing1.jpg" /></li> <li><img src="http://www.5imoban.net/view/demoimg/easing2.gif" /></li> <li><img src="http://www.5imoban.net/view/demoimg/easing3.gif" /></li> <li><img src="http://www.5imoban.net/view/demoimg/easing4.jpg" /></li> </ul> </div> </body> </html>
提示：您可以先修改部分代码再运行

使用方法非常简单：
1、依次引入 jQuery 和 jquery.easing.1.3.js 文件。
2、和平常一样，先用 jQuery 的 animate 将动画效果写出来，只是，这次多加个参数，举例如下：

scrollUl.stop().animate({"left":0},500,"easeOutBounce");   //这里的"easeOutBounce"就是jQuery easing 动画扩展。

下面是jQuery easing插件的所有参数：

swing              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