浅谈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 相关文章推荐
基于JQuery.timer插件实现一个计时器
Apr 25 Javascript
JavaScript高级程序设计(第3版)学习笔记2 js基础语法
Oct 11 Javascript
点击弹出层外区域关闭弹出层jquery特效示例
Aug 25 Javascript
深入理解javascript变量声明
Nov 20 Javascript
微信小程序 监听手势滑动切换页面实例详解
Jun 15 Javascript
Vue实现一个返回顶部backToTop组件
Jul 25 Javascript
Vue-cli创建项目从单页面到多页面的方法
Sep 20 Javascript
基于原生js运动方式关键点的总结(推荐)
Oct 01 Javascript
详解vue在项目中使用百度地图
Mar 26 Javascript
javascript实现图片轮播代码
Jul 09 Javascript
JavaScript Blob对象原理及用法详解
Oct 14 Javascript
js实现日历
Nov 07 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
冰滴咖啡制作步骤
2021/03/03 冲泡冲煮
奇怪的PHP引用效率问题分析
2012/03/23 PHP
php合并js请求的例子
2013/11/01 PHP
刷新PHP缓冲区为你的站点加速
2015/10/10 PHP
phpcms中的评论样式修改方法
2016/10/21 PHP
php Session无效分析资料整理
2016/11/29 PHP
Laravel中GraphQL接口请求频率实战记录
2020/09/01 PHP
DOM相关内容速查手册
2007/02/07 Javascript
javascript使用中为什么10..toString()正常而10.toString()出错呢
2013/01/11 Javascript
JavaScript结合AJAX_stream实现流式显示
2015/01/08 Javascript
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
2015/08/21 Javascript
js实现精确到秒的倒计时效果
2016/05/29 Javascript
jquery遍历标签中自定义的属性方法
2016/09/17 Javascript
JS实现禁止鼠标右键的功能
2016/10/15 Javascript
微信小程序 动态传参实例详解
2017/04/27 Javascript
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
2020/01/21 Javascript
使用Python读写及压缩和解压缩文件的示例
2016/07/08 Python
Python 转义字符详细介绍
2017/03/21 Python
Python、PyCharm安装及使用方法(Mac版)详解
2017/04/28 Python
Python OpenCV实现图片上输出中文
2018/01/22 Python
http请求 request失败自动重新尝试代码示例
2018/01/25 Python
django中模板的html自动转意方法
2018/05/27 Python
Python基于matplotlib画箱体图检验异常值操作示例【附xls数据文件下载】
2019/01/07 Python
python递归法实现简易连连看小游戏
2020/03/25 Python
python3实现在二叉树中找出和为某一值的所有路径(推荐)
2019/12/26 Python
Python关于__name__属性的含义和作用详解
2020/02/19 Python
python编程进阶之异常处理用法实例分析
2020/02/21 Python
Python3.7.0 Shell添加清屏快捷键的实现示例
2020/03/23 Python
iPython pylab模式启动方式
2020/04/24 Python
如何用python写个模板引擎
2021/01/14 Python
任意存:BOXFUL
2018/05/21 全球购物
荷兰美妆护肤品海淘网站:Beautinow(中文)
2020/11/22 全球购物
师德师风承诺书
2014/05/23 职场文书
护士2014年终工作总结
2014/11/11 职场文书
php微信小程序解包过程实例详解
2021/03/31 PHP
在 Python 中利用 Pool 进行多线程
2022/04/24 Python