思享工具箱

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

摘要：
script type=“text/javascript”src=“js/jquery.leasing.min.js”&gt；&书信电报；参数持续时间；easeInOutBounce。使用jQuery自定义动画函数animate（）jQueryEasing结合jQuery自定义的动画函数animate（）来创建所需的各种动画效果，http；

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默认动画效果

1 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, 
    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="http://t.zoukankan.com/jQuery+easing

缓动的动画

.files/jquery.min.js" 

 

type=text/javascript></SCRIPT> 

 

<SCRIPT src="http://t.zoukankan.com/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#lt#*#t | 浏览：284 | 发布日期：

免责声明：文章转载自《jQuery Easing 动画效果扩展--使用Easing插件，让你的动画更具美感。》仅用于学习参考。如对内容有疑问，请及时联系本站处理。

上篇Bing Maps 辅助工具 —— MapCruncher 简单使用学习IIS访问共享文件详解下篇

宿迁高防，2C2G15M，22元/月；香港BGP，2C5G5M，25元/月 雨云优惠码：MjYwNzM=

相关文章

centos8安装docker+phpfpm+alpine+nginx+mariadb

2020-3-31 12:51:44 星期二 记录一下安装过程备忘: 1. 宿主机 centos8 安装docker-ce (可参考centos7的安装方法, 没有太大变化) 2. nginx 直接装在宿主机上, 添加一个域名的配置, 将php文件的请求转发到 172.0.0.1:9700 3. php通过docker的方式安装, 基础镜像选择alpine...

My97DatePicker控件调用

引用My97DatePicker，在要使用的jsp页面中引入js，如下 <script type="text/javascript" src="<%=request.getContextPath() %>/dd/js/My97DatePicker/WdatePicker.js"></script> 调用My97DateP...

OA日志模块

最近两天做了工作日志模块，虽然最后通知因时间紧急，此模块取消，但已具雏形，在此记录一下。 1.查询显示登录用户所有日志 Code<%@ page language="java" pageEncoding="gb2312"%><%@ taglib uri="http://jakarta.apache.org/struts/tags-be...

JSP基础知识➣获取参数和过滤器（四）

JSP表单提交和参数获取 　　JSP表单提交的两种方式：post和get，通过这两种方式提交的参数到后台，获取参数的值主要由request来处理，获取值的方式有以下几种： getParameter(): 使用 request.getParameter() 方法来获取表单参数的值。 getParameterValues(): 获得如checkbox类（名字...

linux makefile字符串操作函数 替换subst、模式替换patsubst、去首尾空格strip、查找字符串findstring、过滤filter、反过滤filter-out、排序函数sort、取单词word、取单词串wordlist、个数统计words

1.1       字符操作函数使用 在Makefile中可以使用函数来处理变量，从而让我们的命令或是规则更为的灵活和具有智能。make所支持的函数也不算很多，不过已经足够我们的操作了。函数调用后，函数的返回值可以当做变量来使用。函数调用，很像变量的使用，也是以“$”来标识的，其语法如下：$(<function> <arguments&g...

Android 属性自定义及使用获取浅析

一、概述 相信你已经知道，Android 可使用 XML 标签语言进行界面的定义。每个标签中有一个一个的属性，这些属性有相应的属性值。例如： <cn.neillee.composedmenu.RotatingArcMenu android: android:layout_width="wrap_content" android:layout_...

最新文章

随机推荐

思享工具箱导航