浅谈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 相关文章推荐
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
Apr 14 Javascript
模拟select的代码
Oct 19 Javascript
javascript模拟select,jselect的方法实现
Nov 08 Javascript
Javascript中数组sort和reverse用法分析
Dec 30 Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
Aug 07 Javascript
jquery实现的伪分页效果代码
Oct 29 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
Nov 07 Javascript
Angular 2父子组件数据传递之@ViewChild获取子组件详解
Jul 04 Javascript
JS跳转手机站url的若干注意事项
Oct 18 Javascript
Node.js动手撸一个静态资源服务器的方法
Mar 09 Javascript
js实现表单项的全选、反选及删除操作示例
Jun 05 Javascript
JS操作JSON常用方法(10w阅读)
Dec 06 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
最新制作ThinkPHP3.2.3完全开发手册
2015/11/23 PHP
PHP+Ajax简单get验证操作示例
2019/03/02 PHP
Google的跟踪代码 动态加载js代码方法应用
2012/11/12 Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
2013/10/09 Javascript
JavaScript中的继承方式详解
2015/02/11 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
2016/05/05 Javascript
JS获取地址栏参数的两种方法(简单实用)
2016/06/14 Javascript
获取JS中网页各种高宽与位置的方法总结
2016/07/27 Javascript
jquery点击切换背景色的简单实例
2016/08/25 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
2016/10/13 Javascript
Javascript this 函数深入详解
2016/12/13 Javascript
Bootstrap表格使用方法详解
2017/02/17 Javascript
20170918 前端开发周报之JS前端开发必看
2017/09/18 Javascript
js+SVG实现动态时钟效果
2018/07/14 Javascript
详解webpack import()动态加载模块踩坑
2018/07/17 Javascript
JS实现导航栏楼层特效
2020/01/01 Javascript
Python中的异常处理学习笔记
2015/01/28 Python
python实现简单淘宝秒杀功能
2018/05/03 Python
Python opencv实现人眼/人脸识别以及实时打码处理
2019/04/29 Python
input file上传文件样式支持html5的浏览器解决方案
2012/11/14 HTML / CSS
html5 canvas的绘制文本自动换行的示例代码
2018/09/17 HTML / CSS
HTML5图片层叠的实现示例
2020/07/07 HTML / CSS
享誉全球的多元化时尚精品购物平台:Farfetch发发奇(支持中文)
2017/08/08 全球购物
Aurora London官网:奢华、负担得起的皮革手袋
2020/08/01 全球购物
如何配置、使用和清除Smarty缓存
2015/12/23 面试题
天逸系统(武汉)有限公司Java笔试题
2015/12/29 面试题
Java面试题:Java类的Main方法如果是Private将会怎么样
2016/08/18 面试题
个人现实表现材料
2014/02/04 职场文书
公务员政审个人鉴定
2014/02/25 职场文书
大学生两会学习心得体会
2014/03/10 职场文书
海飞丝的广告词
2014/03/20 职场文书
校园绿化美化方案
2014/06/08 职场文书
汽车机电维修工求职信
2014/09/30 职场文书
2014年社区矫正工作总结
2014/11/18 职场文书
2019大学竞选班长发言稿
2019/06/27 职场文书
Ubuntu18.04下QT开发Android无法连接设备问题解决实现
2022/06/01 Java/Android