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当中。

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2015-12-07

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏IT 指南者专栏

前端系列之CSS基础知识概述

1、什么是DIV (1)、div就是html一个普通标签,进行区域划分。div特性:独自占一行。独自不能实现复杂效果。必须结合css样式进行渲染。 (2)、d...

37511
来自专栏十月梦想

Vue动画之列表过渡

        首先我们定义一个列表循环的元素放在transition-group中

952
来自专栏小程序的道路

小程序事件

当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数,跳转到demo页面。然后在对应的js中写出事件的具体实现方法

1476
来自专栏Java后端技术

细谈CSS布局方式

  [2].浮动布局方式:通过设置html的float属性显示,值:none不浮动、left对象向左浮动,而后面的内容流向对象的右侧、right对象向右浮动,而...

782
来自专栏老马寒门IT

02-老马jQuery教程-jQuery事件处理

1. 绑简单事件 在DOM中DOM0级绑定事件的方式是直接给事件属性赋值,但是这样有个缺点就是每次指定的事件处理程序会把之前的覆盖掉。 jQuery简单绑定事件...

1738
来自专栏cnblogs

Bootstrap源码分析之transition、affix

一、Transition(过滤) 作为一个基础支持的组件,被其他组件多次引用。实现根据浏览器支持transition的能力,然后绑定动画的结束事件; 首先:创建...

1917
来自专栏九彩拼盘的叨叨叨

jQuery 选取元素概要

注意: 对于 jQuery 自定义的选择器,为了性能,先用 CSS 定义的选择器选,再从结果集中筛选时用 jQuery 自定义的选择器。如:

682
来自专栏Java技术分享圈

杨老师课堂之JavaScript案例之自动切换轮播图片

        2.1跳转div盒子的布局(宽、高、边框线、水平居中、文字居中...)

654
来自专栏Java技术分享圈

杨老师课堂之JavaScript案例手动切换轮播图片

        2.1跳转div盒子的布局(宽、高、边框线、水平居中、文字居中...)

542
来自专栏前端知识分享

第77天:jQuery事件绑定触发

返回值不同,.height()方法返回的是 数字类型(20),.css(“height”)返回的是字符串类型(20px),因此.height()方法常用在参与数...

1063

扫码关注云+社区