jQuery animate动画精讲
HTML5学堂:animate是jQuery中很好用的一个方法,用于实现自定义动画。对于animate方法是有不同的书写方法的,今天我们就来说说animate平时不太常用的一些用法。
如何支持“背景颜色”
animate方法,能够支持单位为数值(px、em、%)的CSS属性,对于背景颜色的变化,animate是不支持的。但是我们有时也希望颜色能够发生变化,此时,我们可以使用一个jQuery插件——jQuery.Color()。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5学堂 - jQuery animate</title>
<link rel="stylesheet" href="model/css/reset.css">
<script src="model/js/jquery-1.11.2.js"></script>
<script src="model/js/jquery.color.js"></script>
<style>
.btn {
height: 50px;
line-height: 50px;
font-size: 32px;
}
.wrap {
width: 400px;
height: 50px;
background: #39f;
color: #fff;
font-size: 32px;
font-weight: bold;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<div class="btn">点击此处</div>
<div class="wrap">HTML5学堂</div>
<script>
$(".btn").click(function(){
$(".wrap").animate({
"background-color" : "#999"
}, 1000)
});
</script>
</body>
</html>
animate动画中的变量应用
jQuery的动画属性animate,除了能够设置基本的数值之外,还可以设置相对的值。如果一个值提供了一个+=和 -=操作符号,那么目标值 = 当前的值 + 或 - 给定的值。
代码示例:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5学堂 - jQuery animate</title>
<link rel="stylesheet" href="model/css/reset.css">
<script src="model/js/jquery-1.11.2.js"></script>
<style>
.btn {
height: 50px;
line-height: 50px;
font-size: 32px;
}
.wrap {
width: 400px;
height: 50px;
background: #39f;
color: #fff;
font-size: 32px;
font-weight: bold;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<div class="btn">点击此处</div>
<div class="wrap">HTML5学堂</div>
<script>
$(".btn").click(function(){
$(".wrap").animate({
"width" : "+=100px"
}, 1000)
});
</script>
</body>
</html>
animate动画中的特殊属性值
jQuery的animate方法当中,对于属性的属性值设置,除了使用数值之外,还可以考虑“show”、“hide”、“toggle”。个人认为,这三种方法的优势在于,对于需要隐藏或显示此类的特效,能够具备较好的扩展性。换句话说,对于一个元素,如果初始状态是宽度400像素,希望能够点击之后宽度变化为0,再点击某处宽度恢复。我们可以使用animate({"width" : "0px"});和animate({"width" : "400px"});来处理。但是,如果此时当前元素的初始宽度并不是400,而是600像素,那么上面这段代码就变得没有“扩展性”了。虽然我们的确可以使用变量替换掉常量,再使用.css()方法获取当前元素的样式,但是也可以通过上面提到的“toggle”等特殊属性值进行控制。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5学堂 - jQuery animate</title>
<link rel="stylesheet" href="model/css/reset.css">
<script src="model/js/jquery-1.11.2.js"></script>
<style>
.btn {
height: 50px;
line-height: 50px;
font-size: 32px;
}
.wrap {
width: 400px;
height: 50px;
background: #39f;
color: #fff;
font-size: 32px;
font-weight: bold;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<div class="btn">点击此处</div>
<div class="wrap">HTML5学堂</div>
<script>
$(".btn").click(function(){
$(".wrap").animate({
"width" : "toggle"
}, 1000)
});
</script>
</body>
</html>
链式动画
我们能够使用animate实现多个动画,但是如何让一个一个的动画有顺序的执行呢?此处会使用到queue这个属性设置。queue表示是否在效果队列中放置动画(即,是否形成一个链式动画)。如果queue的值为false,则动画立即开始,如果为queue的值设置为true,则表示是链式动画。默认为true(链式)。
个人认为,并没有太大的必要,因为默认的就是链式动画,如果希望同时变化,完全可以写在一个animate当中。
- Java学习笔记第一篇:坦克大战游戏
- 腾讯Bugly Unity3D Plugin使用指南
- 远丰集团旗下CMS疑有官方后门
- 前端黑魔法之远程控制地址栏
- 信息收集利器:ZoomEye
- go sync.Mutex 设计思想与演化过程 --转
- 漏洞预警 | Ubuntu 16.04版本存在本地提权漏洞(附EXP)
- 通过“震网三代”和Siemens PLC 0day漏洞,实现对工控系统的入侵实验
- 安卓端渗透工具DVHMA:自带漏洞的混合模式APP
- 小萝莉说Crash(二): Unrecognized selector xxx 之 ForwardInvocation
- 5分钟教程:如何通过UART获得root权限
- 源码级剖析PHP 7.2.x GD拒绝服务漏洞
- 美女程序媛发福利,读懂ANR的trace文件So easy
- Openshift高阶探索实验
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- macbook-12-2015款 安装win10系统 自用 实践笔记
- OpenGL ES 之attribute
- windows server 2012 r2 搭建文件服务器 问题记录 自用 实践笔记
- OpenGL ES 之uniform和varying
- OpenGL ES 绘制纹理
- Win10+Unlocker3+VMware15.5+MacOS10.14+xcode+QT for ios+虚拟机苹果系统 自用 实践笔记
- OpenGL ES 纹理过滤模式-glTexParameteri
- Jenkins时间修改为北京时间
- OpenGL ES for Android 绘制一个点
- OpenGL ES for Android 绘制线
- Jenkins自定义主题
- OpenGL ES for Android 绘制三角形
- Centos7 安装 Tomcat8 的正确姿势 并设置开机自启 实践笔记
- ASP.NET Core 使用 Google 验证码(reCAPTCHA v3)代替传统验证码
- Centos7 安装 Tomcat8 伪集群 的正确姿势 并设置开机自启 实践笔记