动画 animate()

　　01.animate()方法的简单使用

　　有些复杂的动画通过之前学到的几个动画函数是不能够实现，这时候就是强大的animate方法了。

　　操作一个元素执行3秒的淡入动画，对比下一下2组动画设置的区别。

  1. $(elem).fadeOut()
  2. $(elem).animate({
  3.     opacity:
  4. },)

　　显而易见，animate方法更加灵活了，可以精确的控制样式属性从而执行动画。

语法：

  1.  .animate( properties [, duration ] [, easing ] [, complete ] )
  2.  .animate( properties, options )

　　.animate()方法允许我们在任意的数值的CSS属性上创建动画。2种语法使用，几乎差不多了，唯一必要的属性就是一组CSS属性键值对。这组属性和用于设置.css()方法的属性键值对类似，除了属性范围做了更多限制。第二个参数开始可以单独传递多个实参也可以合并成一个对象传递了。

参数分解：

properties：一个或多个css属性的键值对所构成的Object对象。要特别注意所有用于动画的属性必须是数字的，除非另有说明；这些属性如果不是数字的将不能使用基本的jQuery功能。比如常见的，border、margin、padding、width、height、font、left、top、right、bottom、wordSpacing等等这些都是能产生动画效果的。background-color很明显不可以，因为参数是red或者GBG这样的值，非常用插件，否则正常情况下是不能只能动画效果的。注意，CSS 样式使用 DOM 名称（比如 "fontSize"）来设置，而非 CSS 名称（比如 "font-size"）。

　　特别注意单位，属性值的单位像素（px）,除非另有说明。单位em 和 %需要指定使用

  1.  .animate({
  2.      left: ,
  3.      width: '50px'
  4.      opacity: 'show',
  5.      fontSize: "10em",
  6.  }, );

除了定义数值，每个属性能使用'show', 'hide', 和 'toggle'。这些快捷方式允许定制隐藏和显示动画用来控制元素的显示或隐藏

  1. .animate({
  2.     width: "toggle"
  3. });

如果提供一个以+= 或 -=开始的值，那么目标值就是以这个属性的当前值加上或者减去给定的数字来计算的

  1. .animate({
  2.     left: '+50px'
  3. }, "slow");

duration：时间

  1. 动画执行的时间，持续时间是以毫秒为单位的；值越大表示动画执行的越慢，不是越快。还可以提供'fast' 和 'slow'字符串，分别表示持续时间为200 和 600毫秒。

easing动画运动的算法：

  1. jQuery库中是默认的时调用 swing。在一个恒定的速度进行动画，如果需要其他的动画算法，请查找相关的插件

complete回调

  1. 动画完成时执行的函数，这个可以保证当前动画确定完成后发会触发

　　02.animate() 方法来依次执行多个动画

　　animate在执行动画中，如果需要观察动画的一些执行情况，或者在动画进行中的某一时刻进行一些其他处理，我们可以通过animate的提供第二种设置语法，传递一个对象参数，可以拿到动画执行状态一些通知。

  1. .animate( properties, options )

options参数

  1. duration - 设置动画执行的时间
  2. easing - 规定要使用的 easing 函数，过渡使用哪种缓动函数
  3. step：规定每个动画的每一步完成之后要执行的函数
  4. progress：每一次动画调用的时候会执行这个回调，就是一个进度的概念
  5. complete：动画完成回调

  1. 如果多个元素执行动画，回调将在每个匹配的元素上执行一次，不是作为整个动画执行一次

列出常用的方式

  1.  $('#elem').animate({
  2.      width: 'toggle',
  3.      height: 'toggle'
  4.    }, {
  5.      duration: ,
  6.      specialEasing: {
  7.        width: 'linear',
  8.        height: 'easeOutBounce'
  9.      },
  10.      complete: function() {
  11.        $(this).after('<div>Animation complete.</div>');
  12.      }
  13.    });

调用animate()方法可以创建自定义动画效果，它的调用格式为：

  1. $(selector).animate({params},speed,[callback])

其中，params参数为制作动画效果的CSS属性名与值，speed参数为动画的效果的速度，单位为毫秒，可选项callback参数为动画完成时执行的回调函数名。

例如，调用animate()方法以由小到大的动画效果显示图片，如下图所示：

  1.  <body>
  2.      <h3>制作简单的动画效果</h3>
  3.      <img src="data:images/1.png" alt=""/>
  4.      <div id="tip"></div>
  5.      <script type="text/javascript">
  6.          $(function() {
  7.              $('img').animate({
  8.                  width: '100px';
  9.                  height:'100px'
  10.              }, , function() {
  11.                  $("#tip").html('执行完成！');
  12.              });
  13.          })
  14.      </script>
  15.  </body>

在浏览器中显示的效果：

从图中可以看出，调用animate()方法，以渐渐放大的动画效果显示图片元素，当动画执行完成后，通过回调函数在页面的<div>元素中显示“执行完成!”的字样。

　　03.stop()停止动画

动画在执行过程中是允许被暂停的，当一个元素调用.stop()方法，当前正在运行的动画（如果有的话）立即停止。

语法：

  1. .stop( [clearQueue ] [, jumpToEnd ] )
  2. .stop( [queue ] [, clearQueue ] [, jumpToEnd ] )

stop还有几个可选的参数，简单来说可以这3种情况

　　1 .stop(); 停止当前动画，点击在暂停处继续开始。

　　2 .stop(true); 如果同一元素调用多个动画方法，尚未被执行的动画被放置在元素的效果队列中。这些动画不会开始，直到第一个完成。当调用.stop()的时候，队列中的下一个动画立即开始。如果clearQueue参数提供true值,那么在队列中的动画其余被删除并永远不会运行。

　　3 .stop(true,true); 当前动画将停止，但该元素上的 CSS 属性会被立刻修改成动画的目标值。

简单的说：参考下面代码：

  1.  $("#aaron").animate({
  2.      height:
  3.  }, )
  4.  $("#aaron").animate({
  5.      width:
  6.  }, )
  7.  $("#aaron").animate({
  8.      opacity: 0.6
  9.  }, )
  1. stop()：只会停止第一个动画，第二个第三个继续。
  2. stop(true)：停止第一个、第二个和第三个动画。
  3. stop(true ture)：停止动画，直接跳到第一个动画的最终状态。
  1. 如果动画未完成停止了，那么动画完成时执行的回调函数是不会被调用的

jQuery中关于如何使用animate自定义动画的更多相关文章

  1. 在 jQuery 中使用滑入滑出动画效果，实现二级下拉导航菜单的显示与隐藏效果

    查看本章节 查看作业目录 需求说明: 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果 用户将光标移动到"最新动态页"或"帮助查询" ...

  2. Animate自定义动画

    在jQuery中出了基本的动画之外,还有用户 可以自定义的函数,Animate() 用于创建自定义动画的函数. apI上指出: 这个函数的关键在于指定动画形式及结果样式属性对象.这个对象中每个属性都表 ...

  3. vue中使用transition和animate.css动画效果

    一.单个动画中,使用div中引用animate动画 1.下载依赖 npm install animate.css –save 2.main.js中全局引用 import animate from 'a ...

  4. JQuery制作网页—— 第七章 jQuery中的事件与动画

    1. jQuery中的事件: ●和WinForm一样,在网页中的交互也是需要事件来实现的,例如tab切换效果,可以通过鼠标单击事件来实现 ●jQuery事件是对JavaScript事件的封装,常用事件 ...

  5. 4.2 《锋利的jQuery》jQuery中的动画

    问题:queue()方法? tip0: jquery从1.9版本以上就不支持toggle()方法. // $("#panel h5.head").toggle(function() ...

  6. python全栈开发day48-jqurey自定义动画，jQuery属性操作，jQuery的文档操作，jQuery中的ajax

    一.昨日内容回顾 1.jQuery初识 1).使用jQuery而非JS的六大理由 2).jQuery对象和js对象转换 3).jQuery的两大特点 4).jQuery的入口函数三大写法 5).jQu ...

  7. js进阶 13-4 jquery自定义动画animate()如何使用

    js进阶 13-4 jquery自定义动画animate()如何使用 一.总结 一句话总结:animate(params,[speed],[easing],[fn]),参数:params:一组包含作为 ...

  8. 利用自定义动画 animate() 方法，实现某图书网站中“近 7 日畅销榜”中的图书无缝垂直向上滚动特效:当光标移入到图书上时，停止滚动，鼠标移开时，继续滚动

    查看本章节 查看作业目录 需求说明: 利用自定义动画 animate() 方法,实现某图书网站中"近 7 日畅销榜"中的图书无缝垂直向上滚动特效:当光标移入到图书上时,停止滚动,鼠 ...

  9. jQuery中animate动画第二次点击事件没反应

    jQuery中animate动画第二次点击事件没反应 用animate做点击翻页动画时发现第二次点击事件动画没反应,而第一次点击有动画效果,代码如下: 复制代码 代码如下: $(".page ...

随机推荐

  1. hdu 1527威佐夫博弈

    //http://www.cnblogs.com/bo-tao/archive/2012/04/16/2452633.html #include<stdio.h> #include< ...

  2. 【Java基础】基本类型与运算【重要】

    0.   Java基本数据类型 Java的位运算(bitwise operators)直接对整数类型的位进行操作,这些整数类型包括long.int.short.char和 byte,位运算符具体如下表 ...

  3. J2EE 课件2

    1.JSP页面可由5种元素组合而成: ① 普通的HTML标记符: ② JSP标记,如指令标记.动作标记: ③ 变量和方法的声明: ④ Java程序片: ⑤ Java表达式 2.声明变量和方法 JSP页 ...

  4. python实现汉诺塔算法

    汉诺塔 算法分析 1.步骤1:如果是一个盘子,直接将a柱子上的盘子从a移动到c 否则 2.步骤2:先将A柱子上的n-1个盘子借助C移动到B(图1) 已知函数形参为hanoi(n,a,b,c),这里调用 ...

  5. eventlet

    项目中要模拟openstack的swift的多路write功能.初步设想是用python的eventlet来实现多线程.比如在write的时候要同时写入两个storage,就用eventlet生成2个 ...

  6. Mac: 通过蓝牙用安卓手机向Mac发送文件

    1. 打开Mac蓝牙和手机蓝牙 2. 配对 3. mac 系统偏好设置>共享 勾蓝牙共享,选接受并存储 4. 手机发送文件

  7. 【Nginx】进程模型

    转自:网易博客 服务器的并发模型设计是网络编程中很关键的一个部分,服务器的并发量取决于两个因素,一个是提供服务的进程数量,另外一个是每个进程可同时处理的并发连接数量.相应的,服务器的并发模型也由两个部 ...

  8. CAGradientLayer功能

    一.CAGradientLayer介绍 .CAGradientLayer是用于处理渐变色的层结构 .CAGradientLayer的渐变色能够做隐式动画 .大部分情况下.CAGradientLayer ...

  9. nodejs下cannot post错误

    我写了一段CoffeeScript代码,主要是流程为: 1.当客户端请求方式为GET时,输出页面,页面上有个form,form 里有个submit按钮.form的 action="" ...

  10. expect安装测试-批量用户管理

    安装: yum list | grep expect yum install expect 批量创建用户: ansible mysqldb -m user -a 'name=ansible state ...