浅谈jQuery animate easing的具体使用方法(推荐)


Posted in Javascript onJune 17, 2016

从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数:

•properties:一组包含作为动画属性和终值的样式属性和及其值的集合

•duration(可选):动画执行时间,其值可以是三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)

•easing(可选):要使用的过渡效果的名称,如:"linear" 或"swing"

•complete(可选):在动画完成时执行的函数

其中参数easing默认有两个效果:"linear"和"swing",如果需要更多效果就要插件支持了,jQuery Easing Plugin提供了像"easeOutExpo"、"easeOutBounce"等30多种效果,大家可以点击这里去看每一种easing的演示效果,下面详细介绍下其使用方法及每种easing的曲线图。

jQuery easing 使用方法

首先,项目中如果需要使用特殊的动画效果,则需要在引入jQuery之后引入jquery.easing.1.3.js

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript" src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>

引入之后,easing参数可选的值就有以下32种:

1.linear

2.swing

3.easeInQuad

4.easeOutQuad

5.easeInOutQuad

6.easeInCubic

7.easeOutCubic

8.easeInOutCubic

9.easeInQuart

10.easeOutQuart

11.easeInOutQuart

12.easeInQuint

13.easeOutQuint

14.easeInOutQuint

15.easeInExpo

16.easeOutExpo

17.easeInOutExpo

18.easeInSine

19.easeOutSine

20.easeInOutSine

21.easeInCirc

22.easeOutCirc

23.easeInOutCirc

24.easeInElastic

25.easeOutElastic

26.easeInOutElastic

27.easeInBack

28.easeOutBack

29.easeInOutBack

30.easeInBounce

31.easeOutBounce

32.easeInOutBounce

当然一般一个项目中不可能会用到这么多效果,为了减少代码冗余,必要时可以不用引入整个jquery.easing.1.3.js,我们可以只把我们需要的几种easing放入Javascript文件中,如项目中只用到"easeOutExpo"和"easeOutBounce"两种效果,只需要下面的代码就可以了。

jQuery.extend( jQuery.easing, 
{ 
  easeOutExpo: function (x, t, b, c, d) { 
    return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + 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; 
    } 
  }, 
});

使用jQuery自定义动画函数animate来指定easing效果,如自定义一种类弹簧效果的动画:

$(myElement).animate({ 
  top: 500, 
  opacity: 1 
}, 1000, 'easeOutBounce');

值得一提的是jQuery 1.4版本中对animate()方法,easing的方法进行了扩展,支持为每个属性指定easing方法,详细请参考这里,如:

//第一种写法
 $(myElement).animate({ 
  left: [500, 'swing'], 
  top: [200, 'easeOutBounce'] 
}); 
//第二种写法
 $(myElement).animate({ 
  left: 500, 
  top: 200 
}, { 
  specialEasing: { 
    left: 'swing', 
    top: 'easeOutBounce' 
  } 
});

使用jQuery内置动画函数如slideUp()、slideDown()等来指定easing效果,以下两种方法都可以:

$(myElement).slideUp(1000, method, callback}); 
$(myElement).slideUp({ 
  duration: 1000,  
  easing: method,  
  complete: callback 
});

以上就是小编为大家带来的浅谈jQuery animate easing的具体使用方法(推荐)全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
初学prototype,发个JS接受URL参数的代码
Sep 25 Javascript
jQuery的一些注意
Dec 06 Javascript
jquery文字上下滚动的实现方法
Mar 22 Javascript
一个支持任意尺寸的图片上下左右滑动效果
Aug 24 Javascript
javascript中setAttribute()函数使用方法及兼容性
Jul 19 Javascript
学习JavaScript设计模式(继承)
Nov 26 Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
Feb 15 Javascript
Js 获取、判断浏览器版本信息的简单方法
Aug 08 Javascript
使用jquery判断一个元素是否含有一个指定的类(class)实例
Feb 12 Javascript
js表单序列化判断空值的实例
Sep 22 Javascript
JavaScript实现仿Clock ISO时钟
Jun 29 Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
Apr 02 Javascript
jQuery animate easing使用方法图文详解
Jun 17 #Javascript
JS常用字符串方法(推荐)
Jan 15 #Javascript
url中的特殊符号有什么含义(推荐)
Jun 17 #Javascript
JS模拟的Map类实现方法
Jun 17 #Javascript
jQuery实现iframe父窗体和子窗体的相互调用
Jun 17 #Javascript
JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
Jun 16 #Javascript
JS阻止事件冒泡行为和闭包的方法
Jun 16 #Javascript
You might like
php获取错误信息的方法
2015/07/17 PHP
Javascript注入技巧
2007/06/22 Javascript
在表单提交前进行验证的几种方式整理
2013/07/31 Javascript
jQuery图片渐变特效的简单实现
2016/06/25 Javascript
JavaScript结合Bootstrap仿微信后台多图文界面管理
2016/07/22 Javascript
vue.js利用defineProperty实现数据的双向绑定
2017/04/28 Javascript
详解vue-router 2.0 常用基础知识点之router-link
2017/05/10 Javascript
js将当前时间格式化为 年-月-日 时:分:秒的实现代码
2018/01/20 Javascript
Vue.set()实现数据动态响应的方法
2018/02/07 Javascript
vue-router重定向不刷新问题的解决
2018/06/25 Javascript
vue-router+nginx 非根路径配置方法
2018/06/30 Javascript
layui的布局和表格的渲染以及动态生成表格的方法
2019/09/18 Javascript
Websocket 向指定用户发消息的方法
2020/01/09 Javascript
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
2020/07/20 Javascript
JS闭包原理及其使用场景解析
2020/12/03 Javascript
[02:35]DOTA2英雄基础教程 狙击手
2014/01/14 DOTA
python 查找文件夹下所有文件 实现代码
2009/07/01 Python
python中子类继承父类的__init__方法实例
2016/12/15 Python
OpenCV-Python实现轮廓检测实例分析
2018/01/05 Python
python SSH模块登录,远程机执行shell命令实例解析
2018/01/12 Python
python的xpath获取div标签内html内容,实现innerhtml功能的方法
2019/01/02 Python
Python批量删除只保留最近几天table的代码实例
2019/04/01 Python
python字典一键多值实例代码分享
2019/06/14 Python
python数据处理——对pandas进行数据变频或插值实例
2020/04/22 Python
python如何处理程序无法打开
2020/06/16 Python
实现Python3数组旋转的3种算法实例
2020/09/16 Python
python爬取豆瓣电影排行榜(requests)的示例代码
2021/02/18 Python
python爬虫scrapy基本使用超详细教程
2021/02/20 Python
CSS3 flex布局之快速实现BorderLayout布局
2015/12/03 HTML / CSS
宝拉珍选澳大利亚官方购物网站:Paula’s Choice澳大利亚
2016/09/13 全球购物
女孩每月服装订阅盒:kidpik
2019/04/17 全球购物
《逃家小兔》教学反思
2014/02/23 职场文书
大学生会计职业生涯规划范文
2014/02/28 职场文书
在职员工证明书
2014/09/19 职场文书
Python 流媒体播放器的实现(基于VLC)
2021/04/28 Python
为Java项目添加Redis缓存的方法
2021/05/18 Redis