最近在学习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. CAS SSO单点登录实例

    1.因为是本地模拟sso环境,而sso的环境测试需要域名,所以需要虚拟几个域名出来,步骤如下: 2.进入目录C:\Windows\System32\drivers\etc 3.修改hosts文件 12 ...

  2. Python之路(第三十九篇)管道、进程间数据共享Manager

    一.管道 概念 管道可用于具有亲缘关系进程间的通信,有名管道克服了管道没有名字的限制,因此,除具有管道所具有的功能外,它还允许无亲缘关系进程间的通信. 先画一幅图帮助大家理解下管道的基本原理 现有2个 ...

  3. playframework 一步一步来 之 日志 (三)

    在paly中自定义配置logback,也很简单,只需在conf folder下添一个application-logger.xml或者logger.xml就行了.(出处:"If you cre ...

  4. SQL0419N 十进制除法运算无效,因为结果将有一个负小数位。 SQLSTATE=42911

    select case when sum(qty_sold*u.um03/u.um08) <> 0 then decimal(coalesce(sum(d.amt_sold_with_ta ...

  5. javascript和c#aes加密方法互解

    关键信息如下. javascript function Encrypt() { var key = CryptoJS.enc.Utf8.parse('8080808080808080'); var i ...

  6. Chapter5_初始化与清理_this关键字

    this关键字是Java中一类很特殊的关键字,首先它只能在方法内使用,用来表示调用这个方法的对象,在这一点上this和其他对对象的引用的操作是相同的.我们之所以可以在方法内部访问到它是因为编译器在方法 ...

  7. 笔记本电脑连接wifi,同时提供热点wifi给手机使用

    笔记本电脑连接wifi,同时提供热点wifi给手机使用 用电脑建立WiFi供手机平板设备使用ps:电脑需要有无线网卡,一般笔记本都自带 此教程仅适用Windows 7 & 8,1.打开笔记本的 ...

  8. JS中的同步和异步

    javascript语言是一门“单线程”的语言,不像java语言,类继承Thread再来个thread.start就可以开辟一个线程,所以,javascript就像一条流水线,仅仅是一条流水线而已,要 ...

  9. Mysql 主从数据库

    MYSQL主从数据库同步备份配置 一.准备 用两台服务器做测试: Master Server: 172.16.0.180/Linux/MYSQL 5.1.41 Slave Server: 172.16 ...

  10. 2019.03.28 bzoj3326: [Scoi2013]数数(数位dp)

    传送门 题意: 一个人数数,规则如下: 确定数数的进制B 确定一个数数的区间[L, R] 对于[L, R] 间的每一个数,把该数视为一个字符串,列出该字符串的所有连续子串对应的B进制数的值. 对所有列 ...