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

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

引入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. 【Java编码准则】の #12不要使用不安全或者强度弱的加密算法

    安全性要求高的应用程序必须避免使用不安全的或者强度弱的加密算法,现代计算机的计算能力使得攻击者通过暴力破解能够攻破强度弱的算法.比如,数据加密标准算法DES是极度不安全的,使用类似EFF(Electr ...

  2. C#面向对象复习概要

    1.面向对象:我们将具有统一行为和属性的对象抽象划分为类,通过类去创建对象.这种编程思想叫做面向对象的编程思想. 2.属性:对象具有的属性 using System; using System.Col ...

  3. Content-Type boundary 问题

    我并不知道问题怎么描述清楚一些. 事情是这样的,使用  Microsoft Dynamics CRM Server 2016 做CRM系统的时候用到 使用 Web API 执行批处理操作(参见SDK或 ...

  4. 自动生成Makefile文件

    主要的工具有autoscan, aclocal, autoheader, autoconfig,automake 1 .创建c源文件hello.c #include <stdio.h> i ...

  5. 批量执行SQL文件

    原文:批量执行SQL文件 摘要:很多时候我们在做系统升级时需要将大量的.sql文件挨个执行,十分不方便.而且考虑到执行顺序和客服的操作方便性,能不能找到一种简单的方法来批量执行这些sql文件呢? 主要 ...

  6. C# 实现设置系统环境变量设置

    原文:C# 实现设置系统环境变量设置 以前实现系统环境变量设置时是要在电脑属性--高级--环境变量设置,实现方式主要有2种, 修改注册表,添加环境变量 调用系统Kernel32.DLL函数,设置环境变 ...

  7. 学习Swift写iOS?那写安卓和WinPhone呢?请看一石三鸟终极解决方案 - Silver!

    首先,你必须知道的是,Silver是苹果最新编程语言Swift的免费实现版本. 通过Silver,你可以使用Swift语言来编写.NET,Java,安卓和Cocoa APIs.你甚至可以在这些平台上共 ...

  8. loadrunner监控度量项及中文解释

    1. Number of Concurrent Users (NCU) 并发用户数 – 在指定时刻,系统观察到的并发用户连接数. 2. Request Per Second (RPS) 每秒处理请求数 ...

  9. linux有用技巧:使用快照制作虚拟机

    在日常的学习其中,假设遇到了集群和负载均衡类的实验,须要用到大量的虚拟机,假设一个一个的去创建,显然是很费力和低效的.所以今天交给大家怎样用快照来制作虚拟机.想要多少给你多少^_^.仅仅要内存够用! ...

  10. C# 关闭子线程的方法

    将子线程设定为IsBackGroud = true,程序关闭则自动死亡. 暴力手段:System.Environment.Exit(0).关闭时直接x掉所有线程. 子线程自行结束:子线程中自己判断.可 ...