锋利的jQuery读书笔记---jQuery中动画
jQuery中的动画：
1.show和hide
2.fadeIn和fadeOut
3.slideUp和slideDown
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script type="text/javascript" src="../../js/jquery-2.1.3.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
<title>jQuery中的动画</title>
<style type="text/css">
*{margin:0;padding:0;}
body { font-size: 13px; line-height: 130%; padding: 60px }
#panel { width: 300px; border: 1px solid #0050D0 }
.head { height:24px;line-height:24px;text-indent:10px;background: #96E555; cursor: pointer;width:100%; }
.content { padding: 10px; text-indent:24px; border-top: 1px solid #0050D0;display:block; }
</style>
</head>
<body> <div id="panel">
<h5 class="head">什么是jQuery?</h5>
<div class="content">
jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
</div>
</div> </body> <script type="text/javascript">
/**
* 1. show()和hide()
* show()和hide()方法是jQuery中最基本的动画方法。在HTML中，为一个元素调用hide()方法，会将元素的display样式改为"none"
* */
// $(function () {
// $("#panel h5.head").toggle(function () {
// $(this).next().hide("slow");
// }, function () {
// $(this).next().show("slow");
// })
// }) /**
* 2. fadeIn()和fadeOut()
* fadeIn()和fadeOut()方法只改变元素的不透明度。
* fadeOut()方法会在指定的一段时间内降低元素的不透明度，直至元素完全消失("display:none")。
* fadeIn()方法则相反
* */
// $(function () {
// $("#panel h5.head").toggle(function () {
// $(this).next().fadeOut("slow");
// }, function () {
// $(this).next().fadeIn("slow");
// })
// }) /**
* 3. slideUp()和slideDown()
* slideUp()和slideDown()方法只会改变元素的高度。
* 如果一个元素的display属性为"none",当调用slideDown()方法时，这个元素将由上至下延伸展示。
* slideUp()方法正好相反，元素将由下至上缩短隐藏。
* */
$(function () {
$("#panel h5.head").toggle(function () {
$(this).next().slideUp("slow");
}, function () {
$(this).next().slideDown("slow");
})
}) </script> </html>
4.自定义动画
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script type="text/javascript" src="../../js/jquery-2.1.3.js"></script>
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
body { padding: 60px }
#panel {position: relative; width: 100px; height:100px;border: 1px solid #0050D0;background: #96E555; cursor: pointer}
</style>
</head>
<body> <div id="panel"></div> </body> <script type="text/javascript">
/**
* 4. 自定义动画--animate()
* 语法结构为: animate(param, speed, callback)
* param:一个包含样式属性及值的映射，比如{property1:"value1", property2:"value2"...}
* speed:速度参数，可选
* callback:在动画完成时执行的函数，可选
* */ /**
* 4.1 自定义简单动画
* */
// $(function () {
// $("#panel").click(function () {
// $(this).animate({left: "500px", top: "500px"}, 3000);//向右向下各移动500px
// });
// }) /**
* 4.2 累加、累减动画
* */
// $(function () {
// $("#panel").click(function () {
// $(this).animate({left: "+=500px"}, 3000);//从当前位置右移500px
// })
// }) /**
* 4.3 多重动画
*
* 4.3.1 同时执行多个动画
* */
// $(function () {
// $("#panel").click(function () {
// $(this).animate({left: "500px", height: "200px"}, 3000);
// });
// }) /**
* 4.3.2 按顺序执行多个代码
* */
// $(function () {
// $("#panel").click(function () {
// $(this).animate({left: "500px"}, 3000);
// $(this).animate({height: "200px"}, 3000);
// });
// }) /**
* 4.4 综合动画
* */
// $(function () {
// $("#panel").css("opacity", "0.5");
// $("#panel").click(function () {
// $(this).animate({left:"400px", height:"200px", opacity:"1"}, 3000)
// .animate({top:"200px", width:"200px"}, 3000)
// .fadeOut("slow");
// });
// }) /**
* 4.5 动画回调函数
*
* 在动画链式调用中，css的方法并不能按照调用链执行，如果需要执行css()方法，只需要使用到回调函数
* */
// $(function () {
// $("#panel").css("opacity", "0.5");
// $("#panel").click(function () {
// $(this).animate({left:"400px", height:"200px", opacity:"1"}, 3000)
// .animate({top:"200px", width:"200px"}, 3000, function () {
// $(this).css("border", "5px solid blue");
// })
// });
// }) /**
* 4.6 停止动画和判断是否处于动画状态
* */ /**
* 4.6.1 停止元素的动画---stop()
* 语法结构：stop([clearQueue], [gotoEnd]);
* 参数clearQueue和gotoEnd都是可选的参数，为Boolean值(true或false)
* clearQueue代表是否要清空未执行完的动画队列
* gotoEnd代表是否直接将正在执行的动画跳转到末状态
*
*
* 如果直接调用stop()方法，则会立即停止当前正在进行的动画，如果接下来还有动画等待继续进行，则以当前状态开始接下来的动画
*
* 下面的实例可以防止光标快速移动时造成的动画效果与光标动作不一致，去掉stop后，如果快速移动光标，则会发生动画效果和光标动作不一致
* */
// $(function () {
// $("#panel").hover(function () {
// $(this).stop()
// .animate({height: "150", width: "300"}, 200);
// }, function () {
// $(this).stop()
// .animate({height: "22", width: "60"}, 300);
// })
// }) //组合动画
// $(function () {
// $("#panel").hover(function () {
// $(this).stop(true)
// .animate({height: "150"}, 200) //如果在此时出发了光标移出的事件
// //直接跳过后面的动画
// .animate({width: "300"});
// }, function () {
// $(this).stop(true)
// .animate({height: "22"}, 300)
// .animate({width: "60"}, 300);
// })
// })
/**
* 第二个参数(gotoEnd)可以用于让正在执行的动画直接到达结束时刻的状态，通常用于后一个动画需要基于前一个动画的末状态的情况。
*
* 注意：jQuery只能设置正在执行的动画的最终状态，而没有提供直接到达未执行动画队列最终状态的方法。
* */ /**
* 4.6.2 判断元素是否处于动画状态
* 在使用animate()方法的时候，要避免动画积累而导致的动画与用户的行为不一致
* */
// if(!$(element).is(":animate")){
// //如果当前没有进行动画，则添加新的动画
// } /**
* 4.6.3 延迟动画
* 在动画执行的过程中，如果想对动画进行延迟操作，那么可以使用delay()方法。
* */
// $(function () {
// $("#panel").click(function () {
// $(this).animate({left: "400px", height: "200px", opacity: "1"}, 3000)
// .delay(1000)
// .animate({top: "200px", width: "200px"}, 3000)
// .delay(2000)
// .fadeOut("slow");
// })
// }) /**
* 4.7 其他动画方法
* 除了上面提到的动画方法，jQuery中还有4个专门用于交互的动画方法
* toggle(speed, [callback])-------在1.9中移除
* slideToggle(speed, [easing], [callback])
* fadeTo(speed, opacity, [callback])
* fadeToggle(speed, [easing], [callback])
* */ /**
* 4.7.1 toggle()--可以切换元素的可见状态
* */ /**
* 4.7.2 slideToggle()--通过高度变化来切换匹配元素的可见性，这个动画的效果只调整元素的高度
* */
// $(function () {
// $("#panel").click(function () {
// $(this).slideToggle();
// });
// }) /**
* 4.7.3 fadeTo()--可以把元素的不透明度以渐进方式调整到指定的值。这个动画只调整元素的不透明度
* */
// $(function () {
// $("#panel").click(function () {
// $(this).fadeTo(600, 0.2);
// });
// }) /**
* 4.7.4 fadeToggle()--通过不透明度变化来切换匹配元素的可见性。这个动画只调整元素的不透明度
* */
// $(function () {
// $("#panel").click(function () {
// $(this).fadeToggle();
// });
// }) </script> </html>
最后，动画方法的总结
| 方法名 | 说明 |
| hide()和show() | 同时修改多个样式属性，即高度、宽度和不透明度 |
| fadeIn()和fadeOut() | 只改变不透明度 |
| slideUp和slideDown() | 只改变高度 |
| fadeTo() | 只改变不透明度 |
| toggle() | 用来代替hide()和show()方法，所以会同时修改多个样式，即高度、宽度和不透明度 |
| slideToggle() | 用来代替slideUp和slideDown()方法，所以只能改变高度 |
| fadeToggle() | 用来代替fadeIn()和fadeOut()方法，所以只能改变不透明度 |
| animate() |
属于自定义的方法，以上各种动画方法实质内部都调用了animate()方法。 此外，直接使用animate()方法还能自定义其他的样式属性，例如："left","marginLeft","scrollTop"等 |
动画队列
- 一组元素上的动画效果
- 当在一个animate()方法中应用多个属性时，动画是同时发生的
- 当以链式的写法应用动画方法时，动画是按照顺序发生的(除非queue选项值为false)
- 多组元素上的动画效果
- 默认情况下，动画都是同时发生的
- 当以回调的形式应用动画方式时(包括动画的回调函数和queue方法的回调函数)，动画是按照回调顺序发生的
锋利的jQuery读书笔记---jQuery中动画的更多相关文章
- 锋利的jQuery读书笔记---jQuery中Ajax--get、post等方法
load()方法通常用来从Web服务器上获取静态的数据文件,然而这并不能体现ajax的全部价值. 在项目中,如果需要传递一些参数给服务器中的页面,那么可以使用$.get()或者$.post()方法(或 ...
- 锋利的jQuery读书笔记---jQuery中的事件
jQuery中的事件: 1.加载DOM:注意window.onload和$(document).ready()的不同 2.事件绑定 3.合成事件 --2和3的详细信息见代码- <!DOCTYPE ...
- 锋利的jQuery读书笔记---jQuery中Ajax--load方法
第一个Ajax例子 <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...
- 锋利的jQuery读书笔记---jQuery中操作DOM
一般来说,DOM的操作分为3个方面,即DOM Core.HTML-DOM和CSS-DOM jQuery中的DOM操作主要包括以下种类: 查找节点 查找元素节点 查找属性节点 创建节点 创建元素节点 创 ...
- 锋利的jQuery读书笔记---jQuery中Ajax--序列化元素、Ajax全局事件
serialize()方法: 作用于一个jQuery对象,它能够将DOM元素内容序列化为字符串,用于Ajax请求. <!DOCTYPE html> <html> <hea ...
- Javascript & JQuery读书笔记
Hi All, 分享一下我学JS & JQuery的读书笔记: JS的3个不足:复杂的文档对象模型(DOM),不一致的浏览器的实现和便捷的开发,调试工具的缺乏. Jquery的选择器 a. 基 ...
- 《Android源代码设计模式解析》读书笔记——Android中你应该知道的设计模式
断断续续的,<Android源代码设计模式解析>也看了一遍.书中提到了非常多的设计模式.可是有部分在开发中见到的几率非常小,所以掌握不了也没有太大影响. 我认为这本书的最大价值有两点,一个 ...
- jquery学习笔记---jquery插件开发
http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html jquery插件开发:http://www.cnblogs.com/damonla ...
- 《编写可维护的javascript》读书笔记（中）——编程实践
上篇读书笔记系列之:<编写可维护的javascript>读书笔记(上) 上篇说的是编程风格,记录的都是最重要的点,不讲废话,写的比较简洁,而本篇将加入一些实例,因为那样比较容易说明问题. ...
随机推荐
- XML 实体扩展攻击
XMl Entity Expansion(攻击)某种程度上类似于 XML Entity Expansion,但是它主要试图通过消耗目标程序的服务器环境来进行DOS攻击的.这种攻击基于XML Entit ...
- Tries
trie,又称前缀树或字典樹,是一种有序树,用于保存关联数组,其中的键通常是字符串.与二叉查找树不同,键不是直接保存在节点中,而是由节点在树中的位置决定.一个节点的所有子孙都有相同的前缀,也就是这个节 ...
- Block、委托、回调函数原理剖析（在Object C语境）——这样讲还不懂，根本不可能！
开篇:要想理解Block和委托,最快的方法是搞明白“回调函数”这个概念. 做为初级选手,我们把Block.委托.回调函数,视为同一原理的三种不同名称.也就是说,现在,我们把这三个名词当成一回事.在这篇 ...
- div+css 定位浅析
在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolute,static,fixed分的不是很清楚,以致经常会出现让人很郁闷的结果. 先看下各个属性值的定义 ...
- 独立IP与共享IP的区别
做网站选择独立IP还是共享IP,相信很多站长都在此纠结过,自己不使用服务器的时候从来没有关心过独立IP和共享IP的究竟有什么具体的差别.但当自己真正用到的时候,才发现:同样都是 IP,差别不是一般的大 ...
- 阻止事件冒泡（stopPropagation和cancelBubble）和阻止默认行为(preventDefault和returnValue)
<div id="divId1" style="width:500px;height:500px;background-color:#3ac;text-align: ...
- lintcode ：Count 1 in Binary 二进制中有多少个1
题目: 二进制中有多少个1 49% 通过 计算在一个 32 位的整数的二进制表式中有多少个 1. 样例 给定 32 (100000),返回 1 给定 5 (101),返回 2 给定 1023 (111 ...
- Unix编程之size_t、ssize_t
http://blog.csdn.net/lalor/article/details/7426184 首先,我非常肯定以 及确定的告诉你ssize_t是有符号整型,在32位机器上等同与int,在64位 ...
- 腾讯QQ的开发分客户端软件和服务器端软件
Windows客户端主要是C++ COM/ATL Q+Web 后端C++ CGI ,前端javascript和flash 望采纳 腾讯QQ使用何种开发平台? 腾讯QQ的开发分客户端软件和服务器端软件两 ...
- Java学习笔记之：Java构造函数
一.引言 构造函数是一种特殊的函数.其主要功能是用来在创建对象时初始化对象, 即为v对象成员变量赋初始值,总与new运算符一起使用在创建对象的语句中.构造函数与类名相同,可重载多个不同的构造函数. 构 ...