jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功、变加速运动、缓冲等丰富的动画效果。

jQuery Easing是一款比较老的jQuery插件,在很多网站都有应用,尤其是在一些页面滚动、幻灯片切换等场景应用比较多。它非常小巧,且有多种动画方案供选择,使用简单,而且免费。

官网          demo

引入Easing js文件

该插件基于jQuery,所以需要同时引入jQuery库文件和Easing js文件。

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>

使用jQuery Easing

jQuery Easing是在jQuery原有的动画效果上进行了扩展,所以使用时可以根据jQuery原有的动画函数进行扩展。

1.jQuery默认动画

支持toggle()、slideUp()、slideDown()、show()、hide()等jQuery内置的动画效果,使用代码如下:

$(element).slideUp({
duration: 1000,
easing: method,
complete: callback
});

参数duration:定义动画运动时间,毫秒,其实就是速度,时间越短,运动速度越快。

参数easing:指定动画效果,Easing js提供多种动画效果,有匀速运动、变加速运动、缓冲波动效果,它们 是: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. 各动画实际效果请参照演示demo

参数complete:动画结束后回调函数callback,可以自定义动画结束后的调用函数。

2.使用jQuery自定义动画函数animate()

jQuery Easing结合jQuery的自定义动画函数animate()可以制作各种你想要的动画效果,使用代码如下:

$(element).animate(
   { height:500,
width:600
},
easing: 'easeInOutQuad',
duration: 500,
complete: callback
});

上面的代码定义了一个缓冲效果的动画,我们可以根据项目需要,结合jQuery Easing制作各种动画效果。

装载自: http://www.helloweba.com/view-blog-212.html

jQuery Easing动画效果扩展(转)的更多相关文章

  1. jQuery Easing 动画效果扩展

    jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功.变加速 ...

  2. jQuery Easing 动画效果扩展--使用Easing插件,让你的动画更具美感。

    jQuery  Easing 是一款比较老的jQuery插件,在很多网站都有应用,尤其是在一些页面滚动.幻灯片切换等场景应用比较多.它非常小巧,且有多种动画方案供选择,使用简单,而且免费. 引入Eas ...

  3. jQuery easing动画效果扩展

    引入Easing js文件 <script src="js/jquery.min.js"></script> <script src="js ...

  4. jQuery Easing 动画效果扩展 ,全屏滚动案例

    http://www.helloweba.com/view-blog-212.html $(element).animate({     height:500,     width:600     } ...

  5. jQuery之动画效果show()......animate()

    jQuery之动画效果 1.show()显示效果 语法:show(speed,callback) Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slow ...

  6. 第一百七十二节,jQuery,动画效果

    jQuery,动画效果 学习要点: 1.显示.隐藏 2.滑动.卷动 3.淡入.淡出 4.自定义动画 5.列队动画方法 6.动画相关方法 7.动画全局属性 一.显示.隐藏 jQuery 中显示方法为:. ...

  7. jquery-12 jquery常用动画效果有哪些

    jquery-12 jquery常用动画效果有哪些 一.总结 一句话总结:jquery可以用户animate()自定义动画,也可以slide和fade系列方法来设置动画. 1.动画效果如何设置执行时间 ...

  8. jquery animate 动画效果使用解析

    animate的意思是:使有生气:驱动:使栩栩如生地动作:赋予…以生命作为形容词:有生命的:活的:有生气的:生气勃勃的 先看动画效果:http://keleyi.com/keleyi/phtml/jq ...

  9. jQuery之动画效果

    1.show()显示效果 语法:show(speed,callback) Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slow"," ...

随机推荐

  1. Python入门-引号

    Python 接收单引号(' ),双引号(" ),三引号(''' """) 来表示字符串,引号的开始与结束必须的相同类型的. 其中三引号可以由多行组成,编写多行 ...

  2. 高效的使用STL

    高效的使用STL 仅仅是个选择的问题,都是STL,可能写出来的效率相差几倍: 熟悉以下条款,高效的使用STL: 当对象很大时,建立指针的容器而不是对象的容器 1)STL基于拷贝的方式的来工作,任何需要 ...

  3. return、 return false的用法

    1. return返回null,起到中断方法执行的效果,只要不return false事件处理函数将会继续执行,表单将提交2. return false,事件处理函数会取消事件,不再继续向下执行.比如 ...

  4. js文件的装载和执行

    1.浏览器对script引用的js文件分两步,下载,下载完毕后马上执行:这两步都会阻塞浏览器继续解析. 2.加入defer属性,<script defer type="text/jav ...

  5. 2013年5月~2013年11月份(转接关于ns51服务平台项目)相关资料:

    <1> [平台首页] 界面截图:(网络游客所看到的界面首页) <2>[注册] 有需求则注册会员(略...) <3>[个人空间] 注册成功后进入个人空间(有深层次的需 ...

  6. c++复习一:复数运算的简单实现。

    复数运算的简单实现. 程序很简单了.基本忘光了复数,重新了解了基本概念.如何在平面表示一个复数,复数的长度|x|=开根 a^2+b^2.和四则运算. 程序基本点: 封装和抽象: 1)封装成员数据,私有 ...

  7. TAROT.

    /* * * */ #include<stdio.h> #include<stdlib.h> #include<time.h> int main() { int t ...

  8. poj3855Blast the Enemy!(多边形重心)

    链接 #include <iostream> #include<cstdio> #include<cstring> #include<algorithm> ...

  9. poj3304Segments(直线与多条线段相交)

    链接 枚举两点(端点),循环遍历与直线相交的线段. #include <iostream> #include<cstdio> #include<cstring> # ...

  10. PostgreSQL数据库服务端监听设置及客户端连接方法教程

    众所周知,PostgreSQL 是一个自由的对象-关系数据库服务器(数据库管理系统),是一个可以免费使用的开放源代码数据库系统.本文详细介绍了PostgreSQL数据库服务端监听设置及客户端连接方法, ...