jQuery之animate()用法
最近在学习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>
未完待续。。。
最新文章
- redis incr incrby decr decrby命令
- strcpy(),strcat()的用法
- my_log
- linux 安装eclipse 和cdt
- Nuget 管理entity framework
- 查看Oracle最耗时的SQL
- Java多线程练习三
- 蚂蚁通讯框架SOFABolt之私有通讯协议设计
- 第四章:4.0 python常用的模块
- js面向对象关键点
- zabbix和iptables的nat表结合使用
- sql注入--基于报错的注入
- PullToRefreshListView 应用讲解
- Windows下安装Python requests模块
- Tomcat安全管理规范
- 关于rand 与 randn
- Spring cloud 两种服务调用方式(Rest + Ribbon) 和 Fegin方式
- Linus&#39; Law
- webpack 打包图片 能否提高加载速度
- SecondaryNameNode中的“Inconsistent checkpoint fields”错误原因