浅谈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 相关文章推荐
原创javascript小游戏实现代码
Aug 19 Javascript
jquery click([data],fn)使用方法实例介绍
Jul 08 Javascript
div失去焦点事件实现思路
Apr 22 Javascript
javascript 获取HTML DOM父、子、临近节点
Jun 16 Javascript
取得元素的左和上偏移量的方法
Sep 17 Javascript
AngularJS入门知识之MVW类框架的编程思想探讨
Dec 08 Javascript
深入探讨javascript函数式编程
Oct 11 Javascript
jQuery语法小结(超实用)
Dec 31 Javascript
微信小程序实现动态获取元素宽高的方法分析
Dec 10 Javascript
JS实现将对象转化为数组的方法分析
Jan 21 Javascript
使用webpack/gulp构建TypeScript项目的方法示例
Dec 18 Javascript
vue.js watch经常失效的场景与解决方案
Jan 07 Vue.js
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 应用程序的安全 -- 不能违反的四条安全规则
2006/11/26 PHP
php之XML转数组函数的详解
2013/06/07 PHP
ThinkPHP 3.2 版本升级了哪些内容
2015/03/05 PHP
ThinkPHP安装和设置
2015/07/27 PHP
使用Composer安装Yii框架的方法
2016/03/15 PHP
thinkPHP交易详情查询功能详解
2016/12/02 PHP
thinkPHP3.2.2框架行为扩展及demo示例
2018/06/19 PHP
Jquery 点击按钮显示和隐藏层的代码
2011/07/25 Javascript
非常有用的40款jQuery 插件推荐(系列二)
2011/12/25 Javascript
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
2012/06/14 Javascript
你必须知道的Javascript知识点之&quot;this指针&quot;的应用
2013/04/23 Javascript
Javascript代码在页面加载时的执行顺序介绍
2013/05/03 Javascript
js 获取、清空input type=&quot;file&quot;的值(示例代码)
2013/12/24 Javascript
网页中表单按回车就自动提交的问题的解决方案
2014/11/03 Javascript
AngularJs根据访问的页面动态加载Controller的解决方案
2015/02/04 Javascript
浅谈JavaScript数据类型
2015/03/03 Javascript
全面解析Bootstrap表单使用方法(表单控件状态)
2015/11/24 Javascript
多种JQuery循环滚动文字图片效果代码
2020/06/23 Javascript
jquery跟随屏幕滚动效果的实现代码
2016/04/13 Javascript
浅析jquery如何判断滚动条滚到页面底部并执行事件
2016/04/29 Javascript
jQuery实现的简单分页示例
2016/06/01 Javascript
基于jquery二维码生成插件qrcode
2017/01/07 Javascript
vue.js实现只弹一次弹框
2018/01/29 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
2018/10/09 Javascript
微信小程序实现左滑修改、删除功能
2020/10/19 Javascript
详解JS浏览器事件循环机制
2019/03/27 Javascript
Nuxt.js 静态资源和打包的操作
2020/11/06 Javascript
深入理解Python中字典的键的使用
2015/08/19 Python
python实现文本去重且不打乱原本顺序
2016/01/26 Python
python使用正则表达式替换匹配成功的组并输出替换的次数
2017/11/22 Python
浅谈python3打包与拆包在函数的应用详解
2020/05/02 Python
瑞典最好的运动鞋专卖店:Sneakersnstuff
2016/08/29 全球购物
应届实习生的自我评价范文
2014/01/05 职场文书
庆元旦迎新年广播稿
2014/02/18 职场文书
python 利用PyAutoGUI快速构建自动化操作脚本
2021/05/31 Python
python周期任务调度工具Schedule使用详解
2021/11/23 Python