首页 技术 正文

jQuery Easing 动画效果扩展–使用Easing插件，让你的动画更具美感。

技术 2022年11月15日
0 收藏 517 点赞 4,888 浏览 7853 个字

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>

点赞 517

贡献者

上一篇： 【第一章】 第一个spring boot程序
下一篇： 第一个Spring Boot程序启动报错了（番外篇）
相关推荐
python开发_常用的python模块及安装方法
python开发_常用的python模块及安装方法
adodb：我们领导推荐的数据库连接组件bsddb3：BerkeleyDB的连接组件Cheetah-1.0：我比较喜欢这个版本的cheeta…
技术
日期：2022-11-24 点赞：878 阅读：9,495
Educational Codeforces Round 11 C. Hard Process 二分
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接：http://www.codeforces.com/contest/660/problem/CDes…
技术
日期：2022-11-24 点赞：807 阅读：5,909
下载Ubuntn 17.04 内核源代码
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
技术
日期：2022-11-24 点赞：569 阅读：6,741
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
技术
日期：2022-11-24 点赞：733 阅读：6,496
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式，并且由于涉及到要把拍到的照片显…
技术
日期：2022-11-24 点赞：512 阅读：8,134
Struts的使用
Struts的使用
一、Struts2的获取　　Struts的官方网站为：http://struts.apache.org/　　下载完Struts2的jar包,…
技术
日期：2022-11-24 点赞：671 阅读：5,298
Lomu

贡献者

这家伙很懒，只想把你留下。

文章
57
收藏
0
人气
178,269
粉丝
进主页
文章展示
  • [ 技术 ] python开发_常用的python模块及安装方法
  • [ 技术 ] Educational Codeforces Round 11 C. Hard Process 二分
  • [ 技术 ] 下载Ubuntn 17.04 内核源代码
  • [ 技术 ] 可用Active Desktop Calendar V7.86 注册码序列号
  • [ 技术 ] Android调用系统相机、自定义相机、处理大图片
  • [ 技术 ] Struts的使用
    • 个人收藏笔记记录
    我的笔记
    首页 首页 菜单 首页 首页