jQuery Easing 动画效果扩展--使用Easing插件，让你的动画更具美感。
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插件，让你的动画更具美感。的更多相关文章
- jQuery Easing动画效果扩展（转）
jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功.变加速 ...
- jQuery Easing 动画效果扩展
jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功.变加速 ...
- jQuery easing动画效果扩展
引入Easing js文件 <script src="js/jquery.min.js"></script> <script src="js ...
- jQuery下拉框扩展和美化插件Chosen
Chosen 是一个支持jquery的select下拉框美化插件,它能让丑陋的.很长的select选择框变的更好看.更方便.不仅如此,它更扩展了select,增加了自动筛选的功能.它可对列表进行分组, ...
- jQuery Easing 动画效果扩展 ,全屏滚动案例
http://www.helloweba.com/view-blog-212.html $(element).animate({ height:500, width:600 } ...
- 第一百七十二节，jQuery，动画效果
jQuery,动画效果 学习要点: 1.显示.隐藏 2.滑动.卷动 3.淡入.淡出 4.自定义动画 5.列队动画方法 6.动画相关方法 7.动画全局属性 一．显示.隐藏 jQuery 中显示方法为:. ...
- paip.关于动画效果的原则 html js 框架总结
paip.关于动画效果的原则 html js 框架总结 1. 动画框架的来源:flex,jqueryui 3 2. 特效的分类 3 2.1. Property effects 动态改变一个或多个目标对 ...
- Jquery11 动画效果
学习要点: 1.显示.隐藏 2.滑动.卷动 3.淡入.淡出 4.自定义动画 5.列队动画方法 6.动画相关方法 7.动画全局属性 在以前很长一段时间里,网页上的各种特效还需要采用 flash 在进行. ...
- iOS酷炫动画效果合集
iOS酷炫动画效果合集 源码地址 https://github.com/YouXianMing/Animations 效果绝对酷炫,包含了多种多样的动画类型,如POP.Easing.粒子效果等等,虽然 ...
随机推荐
- SpringMVC系列（一）SpringMVC概述和搭建SpringMVC的第一个helloWord入门程序
一.SpringMVC 概述 • Spring为展现层提供的基于MVC设计理念的优秀的Web框架,是目前最主流的MVC框架之一 • Spring3.0 后全面超越 Struts2,成为最优秀的 MVC ...
- RedHat 6.4 安装WAS 7.0 启动失败com.ibm.websphere.ssl.SSLException
问题描述 RedHat 6.4 安装 WAS 7.0,安装完成之后启动WAS失败,异常信息如下: [5/7/15 9:59:55:185 CST] 00000000 WsServerImpl E WS ...
- Mac下终端使用密钥登录服务器
可行方法: mac终端输入 ssh-keygen 因为mac系统是类unix系统,linux系统是unix系统演变来的,所以呢,相当于在一个linux系统登录另外一个linux系统, 基本命令还是一样 ...
- 浅谈你感兴趣的 CLR GC 机制底层
本文内容是学习CLR.via C#的21章后个人整理,有不足之处欢迎指导. 昨天是1024,coder的节日,我为自己coder之路定下一句准则--保持学习,保持自信,保持谦逊,保持分享,越走越远. ...
- 手机程序的app包名查找，可以在手机上查到
获取pkgname(安卓软件包名) 1. 先下载pkgName安装文件(pkgName.apk )并在手机上安装2. 打开刚刚安装的pkgName软件,软件会自动生成你手机上软件的包名列表,同时会在手 ...
- Thinkphp5 runtime路径设置data
路径设置 index.php // runtime文件路径define('RUNTIME_PATH', __DIR__ . '/data/runtime/');
- 一分钟理清Vue-cli 代码构建步骤。
1. $ npm install vue -cli -g $ vue init webpack project-name $ cd project-name $ npm install $ npm r ...
- ubuntu-16.04.2-desktop-amd64.iso：安装Oracle11gR2
特点: 使用ubuntu-16.04.2-desktop-amd64.iso 不降级默认的gcc版本,(liveCD 自带默认为 gcc 5.4):仅需要建立“gcc -Wl,--no-as-need ...
- centos7 Minimal安装没有ifconfig
centos7 Minimal 安装后 ip addr 系统的网卡没有分配IP地址 网卡为ens33 cd /etc/sysconfig/network-scripts vi ifcfg-ens33 ...
- linux环境中安装iotop命令,解决-bash: iotop: command not found问题
需求描述: 今天在测试环境中,准备查看mysql各个线程占用的io的情况,准备使用iotop命令来查看,发现没有这个命令 [root@testvm Packages]# iotop -bash: io ...