最近在学习jQuery，看到一个很有意思的函数animate()，但是在网上却没有查到相关的详细资料，于是打算参考jQuery API，自己总结一下。

概述

animate() 方法执行 CSS 属性集的自定义动画。该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。

用法一

$(selector).animate({styles},speed,easing,callback) //创建自定义动画

styles: 必需，定义形成动画的css属性。需要使用驼峰法书写所有的属性名，如paddingLeft而不是padding-left。也可以定义相对值，即相对于元素当前值做改变。需要在指的前面加上 +=或者-=。还可以使用预定义值，属性的动画值设置为 show/hide/toggle。

speed: 可选，定义效果的时长。可取值slow、normal(默认)、fast 或者毫秒数。

easiing: 可选，定义在不同动画点中设置动画速度。内置的easing函数有：swing（缓冲，默认值）、linear（匀速），可通过js文件扩展。

callback:可选，定义在动画完成后所执行的函数名称。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>自定义动画animate()</title>

     <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>

 </head>

     <script type="text/javascript">

     $(document).ready(function(){

         $('button').click(function(){

             $('div').animate({

             height:"300px",

             width:"+=100px", // 相对值

             //:"width":"hide" //预定义值

             },

             "slow",

             "linear",

             function(){

                 alert("高度为："+ $("div").height())

             });

         });

     })

     </script>

 <body>

 <button>开始动画</button>

  <!-- 默认所有的HTML 元素都有一个静态位置，且无法移动。如需要对位置进行操作，要先把元素的position属性 -->

 <div style="background:red;height:100px;width:100px;position:absolute;">

 </div>

 </body>

 </html>

用法二

$(selector).animate({styles},{options})

styles: 必需，定义形成动画的css属性。用法同上

optins: 可选，定义动画的额外选项。

　　可能的值有：

　　　　speed：设置动画的速度。

　　　　easing：定义要使用的easing函数。

　　　　callback:定义动画完成后要执行的函数。

　　　　step：定义动画的每一步完成后要执行的函数。

　　　　queue：布尔值，指示是否在效果队列中放置动画。如果为false，则动画将立即开始。

　　　　specialEasing：定义styles参数的一个或多个 CSS 属性的映射，以及他们对应的 easing 函数。

其他几个与上面的用法类似，主要来看看 step 和 queue 。

默认地，jQuery 提供针对动画的队列功能。这意味着如果编写多个 animate() 调用，jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>自定义动画animate()</title>

     <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>

 </head>

     <style type="text/css">

         div {

         background-color: #bca;

         width: 200px;

         height: 1.1em;

         text-align: center;

         border: 2px solid green;

         margin: 3px;

         font-size: 14px;

       }

     </style>

     <script type="text/javascript">

     $(document).ready(function(){

         $('#first').click(function(){

         // 默认地，动画会依次执行

             $('#div1').animate({height:"200px"})

                 .animate({width:"+=100px"},"slow")

                 .animate({fontSize:"50px"},"slow");

         });

         $('#second').click(function(){

         // 第一个动画不在队列中，则前两个一起执行

             $('#div2').animate({height:"200px"},{queue:false})

                 .animate({width:"+=100px"},"slow")

                 .animate({fontSize:"50px"},"slow");

         });

     });

     </script>

 <body>

 <button id="first">div1</button>

 <button id="second">div2</button>

 <div id="div1">div1</div>

 <div id="div2">div2</div>

 </body>

 </html>

未完待续。。。

jQuery之animate()用法的更多相关文章

  1. jQuery中Animate进阶用法（一）

    jQuery中animate的用法你了解多少呢?如果仅仅是简单的移动位置,显示隐藏,哦!天哪你在浪费资源!因为animate太强大了,你可以有很多意想不到的用法!让我们一起研究一下吧~~ 首先要了解j ...

  2. jQuery中animate()方法用法实例

    本文实例讲述了jQuery中animate()方法用法.分享给大家供大家参考.具体分析如下: 此方法用于创建自定义动画,并且能够规定动画执行时长.擦除效果.动画完成后还可以地触发一个回调函数. ani ...

  3. Jquery remove 高级用法

    Jquery remove 高级用法 html 代码 <div class="file-image">abc1111</div><div class= ...

  4. jquery.cookie.js 用法

    jquery.cookie.js 用法   一个轻量级的cookie 插件,可以读取.写入.删除 cookie. jquery.cookie.js 的配置 首先包含jQuery的库文件,在后面包含 j ...

  5. jQuery $.post $.ajax用法

    jQuery $.post $.ajax用法 jQuery.post( url, [data], [callback], [type] ) :使用POST方式来进行异步请求 参数: url (Stri ...

  6. jQuery包裹节点用法完整示例

    本文实例讲述了jQuery包裹节点用法.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Typ ...

  7. jQuery的animate方法在IE8下出现小问题

    今天修改网站的bug,把网页显示的几张图片给做成左右滑动的动画效果: 由于本身有一个demo可供参考,然后在此基础上进行修改,所以很快就搞定了,然后在chrome,firefox,IE9下分别进行测试 ...

  8. jQuery的animate在火狐浏览器上不支持backgroundPositionX的解决方法

    在网上找的ffSupp.js文件 /** * 自定义backgroundPosition的animate,支持火狐,jQuery1.8以上版本 * @author Meleong * v1.00 */ ...

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

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

随机推荐

  1. 常用的三种json软件的使用

    从几个角度比较三种软件 1. json操作 2 反解 3 性能 易用性还没有列出. 可以根据个人喜好进行取舍. package json; import com.alibaba.fastjson.JS ...

  2. 2，fiddler的基本设置

    1,首次打开的基本设置 2,过滤抓包的内容 1)较为常用的是: URL包含和hosts的设置 2)不常用的是 3,设置https 这是实在安装证书,当还是不能抓到https的包的时候,可以区安装彼得证 ...

  3. 代码简洁的滑动门（tab）jquery插件

    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org ...

  4. 摹客iDoc 新功能“柔性工作流”，让设计随需而动

    摹客iDoc推出了全新“柔性工作流”,让协作设计自由流动,随需而动. 更高效.更自由的协作方式,赶快告诉你的团队吧~ “柔性工作流” VS “普通工作流” 普通工作流往往是将很多东西混杂在一起,并施以 ...

  5. ArrayList 和LinkedList的区别？

    ArrayList底层使用时数组.LinkedList使用的是链表. ArrayList:  数组查询具有所有查询特定元素比较快.而插入和删除和修改比较慢(数组在内存中是一块连续的内存,如果插入或删除 ...

  6. windows环境下wamp安装redis拓展

    环境: wamp集成环境 安装分为两部 1.安装redis客户端   https://github.com/ServiceStack/redis-windows/raw/master/download ...

  7. 20175316 盛茂淞 MyCP(课下作业，必做)

    题目要求 编写MyCP.java 实现类似Linux下cp XXX1 XXX2的功能,要求MyCP支持两个参数: java MyCP -tx XXX1.txt XXX2.bin 用来把文本文件(内容为 ...

  8. python （创建虚拟环境）

    Python python 介绍 Python是一门计算机编程语言.是一种面向对象的动态类型语言,最初被设计用于编写自动化脚本(shell),随着版本的不断更新和语言新功能的添加,越来越多被用于独立的 ...

  9. 85、int 、NSInteger、NSUInteger、NSNumber的区别和联系

    NSNumber是NSValue的一个子类,它是一个对象来存储数字值包括bool型,它提供了一系列的方法来存储char a signed or unsigned char, short int, in ...

  10. Web表现层

    目录 Web表现层调用过程... 2 延迟... 3 什么是延迟... 3 延迟的构成... 3 最基本的优化思路:... 4 Web表现层性能优化... 4 Web性能的基本指标... 4 Web性 ...