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原有的动画效果上进行了扩展,所以使用时可以根据jQuery原有的动画函数进行扩展。

设置jQuery默认动画效果

 jQuery.easing.def = “method”;//如:easeOutExpo

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. 使用jQuery自定义动画函数animate()

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

$(element).animate({ 
    height:500, 
    width:600 
    },{ 
    easing: 'easeInOutQuad', 
    duration: 500, 
    complete: callback 
});
http://tympanus.net/codrops/2010/07/16/slide-down-box-menu/效果实例

 
 

else var s = p/(2*Math.PI) * Math.asin (c/a);

return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;

},

easeOutElastic: function (x, t, b, c, d) {

var s=1.70158;var p=0;var a=c;

if (t==0) return b;

if ((t/=d)==1) return b+c;

if (!p) p=d*.3;

if (a < Math.abs(c)) { a=c; var s=p/4; }

else var s = p/(2*Math.PI) * Math.asin (c/a);

return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;

},

easeInOutElastic: function (x, t, b, c, d) {

var s=1.70158;var p=0;var a=c;

if (t==0) return b;

if ((t/=d/2)==2) return b+c;

if (!p) p=d*(.3*1.5);

if (a < Math.abs(c)) { a=c; var s=p/4; }

else var s = p/(2*Math.PI) * Math.asin (c/a);

if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;

return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;

},

easeInBack: function (x, t, b, c, d, s) {

if (s == undefined) s = 1.70158;

return c*(t/=d)*t*((s+1)*t - s) + b;

},

easeOutBack: function (x, t, b, c, d, s) {

if (s == undefined) s = 1.70158;

return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;

},

easeInOutBack: function (x, t, b, c, d, s) {

if (s == undefined) s = 1.70158;

if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;

return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;

},

easeInBounce: function (x, t, b, c, d) {

return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;

},

easeOutBounce: function (x, t, b, c, d) {

if ((t/=d) < (1/2.75)) {

return c*(7.5625*t*t) + b;

} else if (t < (2/2.75)) {

return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;

} else if (t < (2.5/2.75)) {

return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;

} else {

return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;

}

},

easeInOutBounce: function (x, t, b, c, d) {

if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;

return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;

}

});

至于该如何使用上面的缓动函数呢?将缓动函数保存为

js

文件,在

html

jquery

文件之后

调用。下面是使用示例,用

animate

动画:

<!DOCTYPE

HTML

PUBLIC

"-//W3C//DTD

HTML

4.01

Transitional//EN"

"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

<!-- saved from url= http://www.ushai.net/class/13.html -->

<HTML

xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>jQuery+easing

</TITLE>

<META http-equiv=Content-Type content="text/html; charset=utf-8">

<STYLE type=text/css> {

PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px;

PADDING-TOP: 0px

}

BODY {

FONT: 12px/1.8 Arial; COLOR: #666; TEXT-ALIGN: center

}

UL {

LIST-STYLE-TYPE: none

}

H1 {

MARGIN: 15px 0px; FONT: bold 24px/1.5 "Microsoft Yahei"; TEXT-ALIGN: center

}

.wrapper {

BORDER-RIGHT:

#e6e6e6

1px

solid;

PADDING-RIGHT:

20px;

BORDER-TOP:

#e6e6e6

1px

solid;

PADDING-LEFT:

20px;

PADDING-BOTTOM:

20px;

MARGIN:

0px

auto;

BORDER-LEFT:

#e6e6e6

1px

solid;

WIDTH:

910px;

PADDING-TOP:

20px;

BORDER-BOTTOM: #e6e6e6 1px solid; BACKGROUND-COLOR: #f6f6f6

}

.animation {

BORDER-RIGHT:

#ddd

1px

solid;

BORDER-TOP:

#ddd

1px

solid;

BACKGROUND:

#efefef;

BORDER-LEFT:

#ddd

1px

solid;

BORDER-BOTTOM:

#ddd

1px

solid;

POSITION:

relative; HEIGHT: 50px

}

.block {

LEFT:

0px;

WIDTH:

50px;

POSITION:

absolute;

TOP:

0px;

HEIGHT:

50px;

BACKGROUND-COLOR: #000

}

.console {

PADDING-RIGHT:

15px;

PADDING-LEFT:

15px;

PADDING-BOTTOM:

15px;

PADDING-TOP: 15px

}

.text {

TEXT-ALIGN: left

}

P {

PADDING-RIGHT:

0px;

PADDING-LEFT:

0px;

PADDING-BOTTOM:

0px;

PADDING-TOP: 10px

}

</STYLE>

<META content="MSHTML 6.00.2900.6148" name=GENERATOR></HEAD>

<BODY>

<H1>jQuery+easing

缓动的动画

</H1>

<DIV class=wrapper>

<DIV class=animation>

<DIV class=block id=block></DIV></DIV>

<DIV class=console><SELECT id=easingType name=swing> <OPTION value=""

selected>def -

默认方式设置

</OPTION> <OPTION value=easeInQuad>in - Quadratic -

二次方缓动

</OPTION>

<OPTION

value=easeOutQuad>out

-

Quadratic

-

二次方缓动

</OPTION>

<OPTION value=easeInOutQuad>inOut - Quadratic -

二次方缓动

</OPTION> <OPTION

value=easeInCubic>in - Cubic -

三次方缓动

</OPTION> <OPTION value=easeOutCubic>out

-

Cubic

:三次方缓动

</OPTION> <OPTION value=easeInOutCubic>inOut - Cubic

:三次方缓

</OPTION>

<OPTION value=easeInQuart>in - Quartic -

四次方缓动

</OPTION> <OPTION

value=easeOutQuart>out - Quartic -

四次方缓动

</OPTION> <OPTION

value=easeInOutQuart>inOut - Quartic -

四次方缓动

</OPTION> <OPTION

value=easeInQuint>in

-

Quintic

-

</OPTION>

<OPTION

value=easeOutQuint>out

- Quintic -

五次方缓动

</OPTION> <OPTION value=easeInOutQuint>inOut - Quintic -

五次方缓

</OPTION>

<OPTION

value=easeInSine>in

-

Sinusoidal

-

正弦曲

线缓动

</OPTION>

<OPTION value=easeOutSine>out - Sinusoidal -

正弦曲线缓动

</OPTION> <OPTION

value=easeInOutSine>inOut - Sinusoidal -

正弦曲线缓动

</OPTION> <OPTION

value=easeInExpo>in - Exponential -

指数曲线缓动

</OPTION> <OPTION

value=easeOutExpo>out - Exponential -

指数曲线缓动

</OPTION> <OPTION

value=easeInOutExpo>inOut - Exponential -

指数曲线缓动

</OPTION> <OPTION

value=easeInCirc>in

-

Circular

-

线

</OPTION>

<OPTION

value=easeOutCirc>out

- Circular -

圆形曲线缓动

</OPTION> <OPTION value=easeInOutCirc>inOut - Circular -

圆形曲线缓动

</OPTION> <OPTION value=easeInElastic>in - Elastic -

指数衰减的正弦曲线缓动

</OPTION> <OPTION value=easeOutElastic>out - Elastic -

指数衰减的正弦曲线缓动

</OPTION> <OPTION value=easeInOutElastic>inOut - Elastic -

指数衰减的正弦曲线缓动

</OPTION> <OPTION value=easeInBack>in - Back -

超过范围的

三次方缓动

</OPTION>

<OPTION value=easeOutBack>out - Back -

超过范围的三次方缓动

</OPTION> <OPTION

value=easeInOutBack>inOut - Back -

超过范围的三次方缓动

</OPTION> <OPTION

value=easeInBounce>in - Bounce -

指数衰减的反弹缓动

</OPTION> <OPTION

value=easeOutBounce>out - Bounce -

指数衰减的反弹缓动

</OPTION> <OPTION

value=easeInOutBounce>inOut

-

Bounce

-

指数衰减的反弹缓动

</OPTION></SELECT>

<INPUT

id=button_start

type=button

value=

向右运动

>

<INPUT

id=button_stop

type=button

value=

向左运动

> </DIV>

<DIV class=text>

<P><STRONG>

方法介绍:

</STRONG></P>

<UL>

<LI>def

:默认方式设置

<LI>swing

:默认方式加载

<LI>Quad

:二次方缓动

(t)

<LI>Cubic

:三次方缓动

<LI>Quart

:四次方缓动

<LI>Quint

:五次方缓动

<LI>Sine

:正弦曲线缓动

<LI>Expo

:指数曲线缓动

<LI>Circ

:圆形曲线的缓动

<LI>Elastic

:指数衰减的正弦曲线缓动

<LI>Back

:超过范围的三次方缓动

<LI>Bounce

:指数衰减的反弹缓动

</LI></UL>

<P><STRONG>

关于

In

Out

Inout

的说明:

</STRONG></P>

<UL>

<LI>ease<STRONG>In</STRONG>

:加速度缓动;

<LI>ease<STRONG>Out</STRONG>

:减速度缓动;

<LI>ease<STRONG>InOut</STRONG>

50%

</LI></UL>

<P>

缓动方式的翻译来自:

<A

href="http://www.ushai.net/class/13.html">

优晒女装

</A></P>

<P>

原创文章,转载请注明出处:

<A href="http://www.ushai.net/">

优晒

</A></P></DIV></DIV>

<div id="test"></div>

<SCRIPT src="jQuery+easing

缓动的动画

.files/jquery.min.js"

type=text/javascript></SCRIPT>

<SCRIPT src="jQuery+easing

缓动的动画

.files/jquery.easing.1.3.js"

type=text/javascript></SCRIPT>

<SCRIPT type=text/javascript>

$(document).ready(function(){

$('#button_start').click(function(event){

var actionType = $("#easingType").val();

$('#block').animate({left:858},1000,actionType,function(){});

event.preventDefault();

});

$('#button_stop').click(function(event){

var actionType = $("#easingType").val();

$('#block').animate({left:0},1000,actionType,function(){});

event.preventDefault();

});

});

</SCRIPT>

</BODY></HTML>

jQuery Easing 动画效果扩展--使用Easing插件,让你的动画更具美感。的更多相关文章

  1. jQuery Easing动画效果扩展(转)

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

  2. jQuery Easing 动画效果扩展

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

  3. jQuery easing动画效果扩展

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

  4. jQuery下拉框扩展和美化插件Chosen

    Chosen 是一个支持jquery的select下拉框美化插件,它能让丑陋的.很长的select选择框变的更好看.更方便.不仅如此,它更扩展了select,增加了自动筛选的功能.它可对列表进行分组, ...

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

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

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

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

  7. paip.关于动画效果的原则 html js 框架总结

    paip.关于动画效果的原则 html js 框架总结 1. 动画框架的来源:flex,jqueryui 3 2. 特效的分类 3 2.1. Property effects 动态改变一个或多个目标对 ...

  8. Jquery11 动画效果

    学习要点: 1.显示.隐藏 2.滑动.卷动 3.淡入.淡出 4.自定义动画 5.列队动画方法 6.动画相关方法 7.动画全局属性 在以前很长一段时间里,网页上的各种特效还需要采用 flash 在进行. ...

  9. iOS酷炫动画效果合集

    iOS酷炫动画效果合集 源码地址 https://github.com/YouXianMing/Animations 效果绝对酷炫,包含了多种多样的动画类型,如POP.Easing.粒子效果等等,虽然 ...

随机推荐

  1. Android Studio 出现 Build gradle project info

    导入Android Studio,一直停留在Build gradle project info.主要是因为google被墙,下载gradle很慢,有时候设置下载不成功. 参考链接 http://blo ...

  2. 【吉比特】G-bits2018校园春季招聘技术类岗位笔试经验

    笔试公司:厦门吉比特网络技术股份有限公司 笔试岗位:游戏研发工程师 笔试时间:2018年3月30日19:00-20:30 笔试形式:牛客网在线做题 笔试回忆: 笔试总共时长1小时半,共52道题.其中选 ...

  3. 第三百七十七节,Django+Xadmin打造上线标准的在线教育平台—apps目录建立,以及数据表生成

    第三百七十七节,Django+Xadmin打造上线标准的在线教育平台—apps目录建立,以及数据表生成 apps目录建立 我们创建一个apps目录,将所有的app放到apps目录里去,这样方便管理,也 ...

  4. java的GUI程序的基本思路是以JFrame为基础

    JFrame – java的GUI程序的基本思路是以JFrame为基础,它是屏幕上window的对象,能够最大化.最小化.关闭. JPanel – Java图形用户界面(GUI)工具包swing中的面 ...

  5. (转)常见LCD接口

    LCD常用接口原理 点击打开链接 点击打开链接 点击打开链接 点击打开链接 点击打开链接 点击打开链接 点击打开链接 点击打开链接 xubin 平台信息:内核:linux2.6/linux3.0系统: ...

  6. 理解并实现PubSub模式

    假如我们正在构建一个类似于 Google Docs 的应用程序,当用户按下一个按键时,需要做的事情有很多: 新字符显示到屏幕上:插入点向后移动:将本次动作加入到撤销的历史记录中: 保持与服务器同步:拼 ...

  7. Python——signal

    该模块为在Python中使用信号处理句柄提供支持.下面是一些使用信号和他们的句柄时需要注意的事项: 除了信号 SIGCHLD 的句柄遵从底层的实现外,专门针对一个信号的句柄一旦设置,除非被明确地重置, ...

  8. linux中wget命令

    Linux系统中的wget是一个下载文件的工具,它用在命令行下.对于Linux用户是必不可少的工具,我们经常要下载一些软件或从远程服务器恢复备份到本地服务器.wget支持HTTP,HTTPS和FTP协 ...

  9. 原理分析之一:从JDBC到Mybatis

    原理分析之一:从JDBC到Mybatis Mybatis学习(一)原生态的JDBC编程总结 -----系列 深入浅出MyBatis-快速入门

  10. Scripting.FileSystemObject对象的详细技巧指南

    Scripting.FileSystemObject对象的详细技巧指南 FileSystemObject对象提供对计算机文件系统的访问: powered by 25175.net 在代码内操作文本文件 ...