锋利的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>读书笔记(上) 上篇说的是编程风格,记录的都是最重要的点,不讲废话,写的比较简洁,而本篇将加入一些实例,因为那样比较容易说明问题. ...
随机推荐
- Appium环境配置
一.JDK下载.安装及其环境配置 1.下载.安装略过…… 2.环境配置,以jdk-8u45为例,默认安装在 C:\Program Files\Java\jdk1.8.0_45\路径下. 下面设置环境变 ...
- 【面试题015】链表中倒数第k个结点
[面试题015]链表中倒数第k个结点 可以用两个指针,当第一个指针指向了第k个时候,第二个指针让他指向链表的第一个元素,然后这两个指针同时向后面移动, 当第一个指针移动到末尾的时候,第二个指针指 ...
- Java学习笔记之：Java 接口
一.引言 接口(英文:Interface),在JAVA编程语言中是一个抽象类型,是抽象方法的集合,接口通常以interface来声明.一个类通过继承接口的方式,从而来继承接口的抽象方法. 接口并不是类 ...
- C#基础（四）
语句 到目前为止,我们的程序还只能按照编写的顺序执行,中途不能发生任何变化 ...
- 成为一个PHP专家：缺失的环节
这一篇文章是“Becoming a PHP Professional”系列 4 篇博文中的第 1 篇. 当浏览各类与PHP相关的博客时,比如Quora上的问题,谷歌群组,简讯和杂志,我经常注意到技能的 ...
- CMMI 配置管理
配置库的相关知识 通过建立物理配置库的设立规范.各配置库目录的设立原则,确保配置库的统一与规范,确保项目产品得到有效的管理与运用,提高资源的共享与利用:通过 变更管理活动,保证产品的完整.正确.一致, ...
- 在Ubuntu上为Android系统编写Linux内核驱动程序（老罗学习笔记1）
这里,我们不会为真实的硬件设备编写内核驱动程序.为了方便描述为Android系统编写内核驱动程序的过程,我们使用一个虚拟的硬件设备,这个设备只有一个4字节的寄存器,它可读可写.想起我们第一次学习程序语 ...
- BZOJ 1004 Cards（Burnside引理+DP）
题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=1004 题意:三种颜色的扑克牌各有Sr,Sb,Sg张.给出m种置换.两种染色方案在某种置换 ...
- ExtJs自学教程(2)：从DOM看EXTJS
<二> 从DOM看EXTJS 看标题可能有人会问,为啥好好的例子不看,得从DOM看起呢?答案是目标只为了一个:自运行结果把EXTJS看得更清楚点 首先,要看得靠点工具,带点放大镜什么吧?对 ...
- apache启动报错(98)Address already in use: make_sock: could not bind to...
# /etc/init.d/httpd startStarting httpd: (98)Address already in use: make_sock: could not bind to ad ...