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中动画的更多相关文章

  1. 锋利的jQuery读书笔记---jQuery中Ajax--get、post等方法

    load()方法通常用来从Web服务器上获取静态的数据文件,然而这并不能体现ajax的全部价值. 在项目中,如果需要传递一些参数给服务器中的页面,那么可以使用$.get()或者$.post()方法(或 ...

  2. 锋利的jQuery读书笔记---jQuery中的事件

    jQuery中的事件: 1.加载DOM:注意window.onload和$(document).ready()的不同 2.事件绑定 3.合成事件 --2和3的详细信息见代码- <!DOCTYPE ...

  3. 锋利的jQuery读书笔记---jQuery中Ajax--load方法

    第一个Ajax例子 <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...

  4. 锋利的jQuery读书笔记---jQuery中操作DOM

    一般来说,DOM的操作分为3个方面,即DOM Core.HTML-DOM和CSS-DOM jQuery中的DOM操作主要包括以下种类: 查找节点 查找元素节点 查找属性节点 创建节点 创建元素节点 创 ...

  5. 锋利的jQuery读书笔记---jQuery中Ajax--序列化元素、Ajax全局事件

    serialize()方法: 作用于一个jQuery对象,它能够将DOM元素内容序列化为字符串,用于Ajax请求. <!DOCTYPE html> <html> <hea ...

  6. Javascript &amp; JQuery读书笔记

    Hi All, 分享一下我学JS & JQuery的读书笔记: JS的3个不足:复杂的文档对象模型(DOM),不一致的浏览器的实现和便捷的开发,调试工具的缺乏. Jquery的选择器 a. 基 ...

  7. 《Android源代码设计模式解析》读书笔记——Android中你应该知道的设计模式

    断断续续的,<Android源代码设计模式解析>也看了一遍.书中提到了非常多的设计模式.可是有部分在开发中见到的几率非常小,所以掌握不了也没有太大影响. 我认为这本书的最大价值有两点,一个 ...

  8. jquery学习笔记---jquery插件开发

    http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html jquery插件开发:http://www.cnblogs.com/damonla ...

  9. 《编写可维护的javascript》读书笔记(中)——编程实践

    上篇读书笔记系列之:<编写可维护的javascript>读书笔记(上) 上篇说的是编程风格,记录的都是最重要的点,不讲废话,写的比较简洁,而本篇将加入一些实例,因为那样比较容易说明问题. ...

随机推荐

  1. SPSS数据分析—主成分分析

    我们在分析问题的时候,为了准确全面的反映问题,常常收集很多变量,这些变量之间往往具有相关性,导致存在大量的重复信息,直接使用的话,不但模型非常复杂,而且所引起的共线性问题会使模型准确度降低. 对此,我 ...

  2. 单点登录实现----CAS(一)

    最近我们部门交接了一个新项目--- passport,即我司的单点登录系统,虽然没有交接给我,但是个人觉得登录技术是个很好的知识,于是就忙里偷闲简单地学习了下. 单点登录SSO(single sign ...

  3. 响应性web设计实战总结(二)

    响应性web设计实战总结(二) 阅读目录 背景知识: Gulp-less安装及配置如下 对响应性web总结,之前总结过2篇文章:可以看如下: http://www.cnblogs.com/tugenh ...

  4. 一个fork的面试题

    前两天有人问了个关于Unix的fork()系统调用的面试题,这个题正好是我大约十年前找工作时某公司问我的一个题,我觉得比较有趣,写篇文章与大家分享一下.这个题是这样的: 题目:请问下面的程序一共输出多 ...

  5. 第四次个人作业——关于微软必应词典android客户端的案例分析

    [前言] 第一次搞测评这种东西,如果有什么疏漏,请多多谅解.测评内容如题. 第一部分 调研,评测 评测:(设备:Lenovo A806) 软件的bug,功能评测,黑箱测试 bug等级划分方式 5级分类 ...

  6. easyui datagrid的列编辑

    [第十五篇]easyui datagrid的列编辑,同时插入两张表的数据进去   看图说话. 需求:插入两张表,上面的表单是第一张表的内容,下面的两个表格是第二张详情表的内容,跟第一张表的id关联 第 ...

  7. CentOS安装rpm包时error:Failed dependencies

    CentOS6.5安装rpm包时报错,error:Failed dependencies,解决方法如下: 在安装命令后加两个参数 --nodeps --force ,即安装时不再分析包之间的依赖关系而 ...

  8. 利用Asio搭建日志系统

    Asio(http://think-async.com)官方示例中给出了一个比较初步的日志服务,主要代码在basic_logger.hpp.logger_service.hpp.logger_serv ...

  9. [译]SSRS 报表版本控制

    问题 如今商务智能应用广泛,对我们的商业愈加重要. 对新报表和的各种需求不断攀升. 自 SQL Server 2008 R2的 Reporting Services (SSRS) 开始,微软视图为减轻 ...

  10. mac上Android环境变量配置

    1.AndroidSDK路径查看 (1)AndroidStudio: 菜单栏AndroidStudio > Preferences > Appearences&Behavior & ...