锋利的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>读书笔记(上) 上篇说的是编程风格,记录的都是最重要的点,不讲废话,写的比较简洁,而本篇将加入一些实例,因为那样比较容易说明问题. ...
随机推荐
- spring @resource @ Autowired
Spring中什么时候用@Resource,什么时候用@service 当你需要定义某个类为一个bean,则在这个类的类名前一行使用@Service("XXX"),就相当于讲这个类 ...
- MethodInvoker 委托
MethodInvoker 提供一个简单委托,该委托用于调用含 void 参数列表的方法. 在对控件的 Invoke 方法进行调用时或需要一个简单委托又不想自己定义时可以使用该委托. 下面的代码示例演 ...
- Spring Boot 快速入门
Spring Boot 快速入门 http://blog.csdn.net/xiaoyu411502/article/details/47864969 今天给大家介绍一下Spring Boot MVC ...
- Tutorial: Model
What is a model? Across the internet the definition of MVC is so diluted that it's hard to tell what ...
- 理解lua 语言中的点、冒号与self
转载自: http://blog.csdn.net/wangbin_jxust/article/details/12170233 lua编程中,经常遇到函数的定义和调用,有时候用点号调用,有时候用冒号 ...
- [转载]Spring Java Based Configuration
@Configuration & @Bean Annotations Annotating a class with the @Configuration indicates that the ...
- MySQL数据导出导入【转】
MySQL基础 关于MySQL数据导出导入的文章,目的有二: 1.备忘 2.供开发人员测试 工具 mysqlmysqldump 应用举例 导出 导出全库备份到本地的目录 mysqldump -u$US ...
- *[topcoder]IncrementingSequence
http://community.topcoder.com/stat?c=problem_statement&pm=12107 此题想了半天,当时瞥到了Greedy,所以就想着贪心,最后的方法 ...
- s3cmd的安装与使用
s3cmd 是一款 Amazon S3 命令行工具.它不仅能上传.下载.同步,还能设置权限,下面是完整的安装使用指南. 主要是还是用来储存日志文件或者其他什么资料. https://wangyan. ...
- HTML5入门1---Canvas画布
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...