08-jQuery之动画
JQ的动画与特效
JQ中的动画
显示与隐藏
显示与隐藏的切换： 方法：toggle() 示例： 功能描述：三个按钮调用上文中的三种toggle使用 形式，实现图片的切换效果。 实现代码：示例\toggle.html
JQ中的动画
滑动
slideDown()和slideUp()方法： slideDown()：将元素的高度向下增大，产生滑动效果。 可设定速度和回调函数。 slideUp()：将元素的高度向上减小，产生滑动效果。 可设定速度和回调函数。
谢谢！
JQ中的动画
显示与隐藏
动画版的显示隐藏示例： 方法：show(speed,[callback]) 、hide(speed,[callback]) 示例： 功能描述：通过show()方法，在页面中显示图片，同 时执行一个回调函数，改变边框样式， 点击图片时可以将其隐藏。 实现代码：示例\动画版的show与hide.html
JQ中的动画
淡入淡出
淡入淡出示例： 方法： fadeIn()和fadeOut() 示例： 功能描述：使用动画效果进行淡入淡出。 实现代码：示例\fadeIn和fadeOut淡入淡出.html
JQ中的动画
自定义动画
animate()方法： animate()可以让用户自定义动画，语法格式如下： animate(params,[duration],[easing],[callback]) ：
params表示用于制作动画效果的属性和值的集合； duration表示动画的速度，有三种可选项：slow、normal和 fast，也可手工指定数字，单位毫秒 easing为动画插件使用 callback为回调函数
JQ中的动画
自定义动画
自定义动画示例： 方法： animate(params,[duration],[easing],[callback]) 示例： 功能描述：使用动画效果进行淡入淡出。 实现代码：示例\自定义动画.html
实验四 jQuery动画效果
实验四jQuery动画效果【实验目的】1、掌握jQuery处理动画效果的方法；2、掌握jQuery动画的显示与隐藏、淡入淡出、滑动效果的常用方法；3、掌握jQuery自定义动画的定义。
【实验准备】1、复习教材相关内容；2、预习本次实验；【实验内容】1、实现折叠菜单的效果，效果如图4-1所示。
图4-1代码如下：menu.html<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>第一题</title><style type="text/css">.mainleftFAQ {width: 150px;}.admintext11 {padding: 8px 10px;cursor: pointer;position: relative;margin:1px;font-weight:bold;background: #93cdff;font-family: "华文楷体";font-size: 20px;}.FAQlist {display:none;font-family: "新宋体";font-size: 14px;}.FAQlist a{padding:8px 0px;display:block;color:#006699;background-color:#EFEFEF;padding-left:10px;font-weight:bold;text-decoration:none;}.FAQlist a:hover {color:#7fb2f4;background-color:#dfdfdf;text-decoration:underline;}</style><script type="text/javascript" src="js/jquery-1.4.2.js"></script> <script language="javascript" type="text/javascript"> $(document).ready(function() {//将二级菜单设置为不可见$(".FAQlist").hide();//单击一级菜单触发的事件$(".bartitleFAQ").click(function() {//将二级菜单全部设置为不可见$(".FAQlist").hide();//当前一级菜单的二级菜单设置为可见$(this).next().show("fast");});});</script></head><body><div class="mainleftFAQ"><div class="bartitleFAQ"><p class="admintext11">服务管理</p></div><div class="FAQlist"><a href=''> 等待提交</a><a href=''> 等待发布</a><a href=''> 正式项目</a><a href=''> 点此新增</a></div><div class="bartitleFAQ"><p class="admintext11">更新流程</p></div><div class="FAQlist"><a href=''> 后台搜索</a><a href=''> 更新流程</a></div><div class="bartitleFAQ"><p class="admintext11">下载管理</p></div><div class="FAQlist"><a href=''> 下载</a></div></div></body></html>2、实现图片的幻灯片效果，当在当前图片上单击时，显示下一张图片。
jQuery开发基础教程第5章 jQuery中的事件处理和动画效果
5.1.2
jQuery中的事件
jQuery帮助我们统一了所有事件的名称。jQuery中的事件如表5-1所示。
方法 blur() blur(fn) change() 触发元素的blur事件 在每一个匹配元素的blur事件中绑定一个处理函数，在元素失去焦点时触发，既可以是鼠 标行为也可以是使用Tab键离开的行为 触发元素的change事件 说明
mousedown(fn)
mousemove(fn) mouseout(fn) mouseover(fn)
在每一个匹配元素的mousedown事件中绑定一个处理函数，鼠标在元素上点击后 触发
在每一个匹配元素的mousemove事件中绑定一个处理函数，鼠标在元素上移动时 触发 在每一个匹配元素的mouseout事件中绑定一个处理函数，鼠标从元素上离开时 触发 在每一个匹配元素的mouseover事件中绑定一个处理函数，鼠标移入对象时触发
mouseup(fn)
resize(fn)
在每一个匹配元素的mouseup事件中绑定一个处理函数，鼠标点击对象释放时
$(document).ready()方法是事件模块中最重要的一个函数，它极大地提高了Web响应速度。 $(document)是获取整个文档对象，从这个方法名称来理解，就是获取文档就绪的时候。方法的书写 格式为：
$(document).ready(function() { //在这里写代码 });
可以简写成：
error(fn)
focus() focus(fn) keydown()
jQuery动画-让页面动起来
Jquery动画，从入门到精通一.摘要本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍.开发人员一直痛疼做动画. 但是有了jQuery你会瞬间成为别人(那些不知道jQuery的人)眼里的动画高手!本文将介绍jQuery的动画相关函数.原来做动画如此简单!二.前言本系列文章的实例都是针对某一个技术细节的, 因为我们要学习的是基础知识, 虽然总有人希望要复杂一些的应用示例, 但是我想还是让我们先把基础打牢, 有了扎实的基础凭借每个人的智慧一定能创造出更多更好的应用.就在写这篇文章的前几天, 还有不止一个同事在为了"弹出层"效果而犯愁. 但是以后再面对这样的功能看过本篇文章的每一个人都可以开心的微笑了. jQuery, make work easy !三.从实例开始做web程序经常要使用弹出层, 比如单击文字或按钮显示一段提示文字等. 假设有如下需求:∙单击图中的"显示提示文字"按钮, 在按钮的下方显示一个弹出层.∙单击任何空白区域或者弹出层,弹出层消失.用原始javascript我们也完全可以完成这个工作. 有以下几点注意事项:1. 弹出层的位置需要动态计算. 因为触发弹出事件的对象可能出现在页面的任何位置, 比如截图中的位置.2. 为document绑定单击是关闭弹出层的函数, 要使用多播委托, 否则可能冲掉其他人在document绑定的函数.3. 为document绑定了关闭函数后, 需要在显示函数中取消事件冒泡, 否则弹出层将显示后立刻关闭. 用jQuery, 我们可以轻松地实现此实例:∙基本动画函数: 既有透明度渐变, 又有滑动效果. 是最常用的动画效果函数.∙滑动动画函数: 仅使用滑动渐变效果.∙淡入淡出动画函数: 仅使用透明度渐变效果.这三类动画函数效果各不相同, 用法基本一致. 大家可以自己尝试.另外也许上面的三类函数效果都不是我们想要的, 那么jQuery也提供了自定义动画函数, 将控制权放在我们手里让我们自己定义动画效果.下面对三类内置动画函数和自定义动画函数分别讲解.四. 基本动画函数上例中使用的show()和hide()是我们使用最多的基本动画函数.下面是jQuery的基本动画函数:基本动画函数Basics1. 使用基本动画函数基本的动画函数主要分为show,hide 和toggle 三个. 都提供了无参数的版本, 表示不适用动画切换元素的显示状态:在回调函数中的this是执行此函数的DOM对象. 会在动画结束时执行.2. 使用toggle函数toggle函数是功能更强大的函数, 可以切换元素的可见状态. 我们经常遇到需要使用toggle的情况. 比如希望一段文字第一次单击显示弹出层, 第二次单击隐藏弹出层.我们将开篇实例稍作修改即可实现这个效果:滑动动画函数Sliding讲解slideDown就是show的滑动效果版本, slideUp就是hide的滑动效果版本, slideToggle就是toggle 的滑动效果版本.参数完全相同:六.淡入淡出动画函数淡出淡出函数只提供透明度渐变的效果.淡入淡出函数Fading讲解fadeIn和fadeOut两个函数对应show和hide, 用于将对象以透明度渐变的效果显示和隐藏:透明度渐变没有切换函数.需要特别讲解的是fadeTo函数. 这个函数能让对象渐变到指定的透明度上. opacity参数取值从0-1, 比如0.6表示透明度为60%.和fadeIn与fadeOut不同的是, fadeTo函数只改变对象的透明度, 即使透明度为0对象仍然占位.而fadeIn和fadeOut最后一定会改变对象的display属性, fadeOut后对象将从页面上消失(不占位), 但是fadeTo仅仅是让其透明(占位).fadeTo函数可以配合fadeIn使用. 比如默认的情况下, fadeIn最后让对象完全显示:但是如果之前使用过fadeTo设置弹出层的透明度, 则可以让其以半透明:核心代码如下:六. 动画实验室动画实验室是"jQuery实战"一书中的示例, 方便我们查看上面三种动画的效果. 对应源代码的chapter7 \lab.effects.html 文件.源代码在本文最后提供下载.实验室截图如下:七.自定义动画函数上面三个渐变动画函数已经基本满足了我们日常需求. 但是如果我们一定要创建自己的特殊的效果, jQu ery也为我们提供了相关函数.自定义动画函数Custom参数说明1.params(可选)类型:Options说明:一组包含作为动画属性和终值的样式属性和及其值的集合.讲解:通过把元素的样式属性值, 从当前值逐渐调整到params设置的值而产生动画效果.2.duration(可选)类型:String,Number说明:三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000) 讲解:动画效果持续的时间, 时间越长则变得越慢. 如果省略则不会产生动画.3.easing(可选)类型:String说明:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和"swing".讲解:为了让元素逐渐达到params设置的最终效果, 我们需要有一个函数来实现渐变, 这类函数就叫做easing函数. 但是需要这里传递的只是easing函数名称, 使用前需要先将easing函数注册到jQuery上.4.options参数类型:Options说明:一组包含动画选项的值的集合。
jquery中的动画
Jquery 中的动画1、 show()和 hide()a) hide:为每个元素调用 hide 方法会给将该元素的 display 设置为 none $(―element‖).hide()相当于$(―element‖).css(―display‖,‖none‖); show:当把元素隐藏后，可以使用 show()方法将元素的 display 设置为先前的状态 （block,inline 等~） eg: <div class="article"> <div id="head">First Article</div> <div id="content">First Article....First Article....First Article....First Article....First Article....First </div> </div> $(function(){ $(".article #head").toggle(function(){ $(this).next().show(); $(this).css("background","#ccc"); },function(){ $(this).next().hide(); $(this).css("background","#fff"); }); }); b) show()和 hide()方法让元素动起来 可以为 show 和 hide 方法传递一个速度参数。
show(―slow‖); show(1000); hide(1000);//同时减少“内容”的高度、宽度、透明度2、fadeIn()和 fadeOut()只改变元素的透明度fadeOut()会在指定的一段时间内降低元素的透明度，直到完全消失。
jQuery网页特效设计基础教程 第5章 jQuery中的事件处理和动画效果 教案
（7）在jQuery中，应用preventDefault()方法可以阻止浏览器的默认行为。
（8）使用hide()方法可以隐藏匹配的元素。hide()方法相当于将元素CSS样式属性display的值设置为none。
教学过程
教学
环节
教学内容与过程
（教学内容、教学方法、组织形式、教学手段）
课前组织
做好课前“5分钟”教学管理（多媒体、实训室），做好上课前的各项准备工作（打开电脑、打开课件、打开软件、打开U盘中的素材位置、打开授课计划、教案等），吸引学生注意力。
课程
说明
【课前说明】
本章主要介绍了事件与动画效果的处理。“事件是脚本语言的灵魂”，事件使页面具有了动态性和响应性。在传统的JavaScript中内置了一些事件响应的方式，jQuery增强、优化并扩展了基本的事件处理机制。基本的动画效果指的是元素的隐藏和显示。在jQuery中提供了两种控制元素隐藏和显示的方法。
第5章jQuery中的事件处理和动画效果
课程名称
jQuery网页特效设计基础教程
项目名称
jQuery中的事件处理
和动画效果
任务名称
jQuery中的事件处理和动画效果
课时
4
项目性质
□演示性□验证性□设计性√综合性
授课班级
授课日期
授课地点
教学目标
能力目标：
1.具备使用jQuery处理事件的能力
2.具备使用jQuery实现动画效果的能力
总结
评价
通过学习，学生能够掌握jQuery中事件响应加载、事件绑定、事件冒泡、事件捕获、事件对象、淡入淡出动画、滑动动画等的处理方法。
第10章 JQuery制作动画
任务实现
• 选择器获取相关元素 $("span.next").click(function(){ //“向右箭头”绑定单击事件 var $parent = $(this).parents("div.v_show"); //根据当前元素获取祖先元素 var $v_show = $parent.find("div.v_content_list"); 取“图片内容所在的DIV元素” var $v_content = $parent.find("div.v_content"); 取“图片展示区域的DIV元素” });
$("p").show(); },function(){ $("p").hide(); }); • 作为方法 $(".btn").click(function(){ $("p").toggle();});
FAQ答案的显示和隐藏
• 任务实现 $('dl dt').click(function() { //$('dl dt')会选中所有<dl>中的<dt>
• hide()
• 控制不透明度
• fadeIn()
• fadeOut()
• fadeTo()
//$(“div”).fadeTo(“fast”,”0.2”);
• 控制高度
• slideUp()
• slideDown()
FAQ答案的显示和隐藏
jQuery讲义6：jQuery动画
hide( )方法 hide(speed, callback)方法 使包装集中的元素变为隐藏状态。如果不带参数 调用，则通过设置元素的display样式属性值为none 使操作在瞬间完成。如果指定了speed参数，则通过 调整元素的宽度、高度和不透明度为0，使元素在一 段时间内逐渐隐藏，在元素完全隐藏后再设置它们 的display样式属性为none，从显示器上删除元素。 speed参数表示特效持续时间，可设为若干毫秒， 也可以是以下预定义字符串之一：slow normal fast。 callback参数是个可选函数，当动画结束时调用。 在该函数体内部，this表示当前执行动画的元素。
有时候我们可能出于某种原因在动画开始之后就 终止动画。这可能是由于一个用户事件表明有别的 事情将要发生，或者是因为想要开始一个全新的动 画。Stop( )方法可以实现这个目的。 stop(clearQueue, gotoEnd)方法 停止匹配集元素上正在进行的所有动画。 clearQueue参数为布尔值，如果指定为true，则 不仅停止当前动画，而且停止在动画队列中正在等 待执行的所有其他的动画。 gotoEnd 参数也是布尔值，表示是否直接将正在 执行的动画跳转到末状态。 如果直接使用stop( )方法，则会立即停止当前正 在进行的动画，如果接下来还有动画未执行，则以 当前状态开始接下来的动画。 【停止动画举例】
上下滑动元素 上下滑动元素的特效方法slideDown( ) slideUp( )与 show( ) hide( )方法的工作方式类似，只不过当元素在 显示的时候好像是从顶部滑下，而在隐藏的时候好像 是滑入顶部。 与hide( ) show( )一样，滑动特效也有一个相关的方 法来切换元素的隐藏和显示状态：slideToggle( )。
jquery动画制作汇总
分享一些常用的jQuery动画事件和动画函数在jquery中，jquery动画事件和动画函数经常用的到，今天小编抽时间给大家整理了些关于常用的jquery动画事件和动画函数，对jquery动画函数和动画事件相关知识感兴趣的朋友一起学习吧部分jQuery常用的动画函数，整理了一下，在做交互式页面的时候挺有用的fontSize（在animate函数的css参数指定并不同于标准css属性，例如这个css标准是：font-size。
同理上面很多也是这样的情况）jQuery动画函数分三类：1、基本动画函数：既有透明渐变又有滑动效果，常用动画效果。
2、滑动动画函数：仅使用滑动效果。
3、淡入淡出动画函数：仅使用淡入淡出效果。
一.基本动画函数：1、show()显示隐藏匹配元素。
这个就是'show( speed, [callback] )'无动画的版本。
如果选择的元素是可见的，这个方法将不会改变任何东西。
无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;，这个方法都将有效。
例如：显示所有段落，$("p").show()2、show(speed,[callback])以优雅的动画显示匹配的元素，并且在显示完成后可选择返回一个回调函。
可根据指定的速度动态改变每个匹配元素高度、宽度和不透明度。
例如：用缓慢的动画将隐藏的段落显示出来，历时600毫秒，$("p").show(600)3、hide()隐藏显示元素。
这个就是'hide( speed, [callback] )'的无动画版。
如果选择的元素是隐藏的，这个方法将不会改变任何东西。
例如：隐藏所有段落，$("p").hide()4、hide(speed,[callback])以优雅的动画隐藏所有匹配的元素，并在显示完成后可选的触发一个回调函数。
jQuery基础—动画篇解析
.slideDown()：用滑动动画显示一个匹配元素
.slideDown()方法将给匹配元素的高度的动画，这会导致页面的下面部分滑下去，弥补了 显示的方式
常见的操作，提供一个动画是时间，然后传递一个回调，用于知道动画是什么时候结束
.slideDown( [duration ] [, complete ] ) 持续时间（duration）是以毫秒为单位的，数值越大，动画越慢，不是越快。 字符串 'fast' 和 'slow' 分别代表200和600毫秒的延时。 如果提供任何其他字符串，或者这个duration参数被省略，那么默认使用400 毫秒的延时。
显示与隐藏切换toggle方法
其实就是确定是使用show还是hide方法 if ( display === true ) { $( "elem" ).show(); } else if ( display === false ) { $( "elem" ).hide(); } toggle方法就是show与hide的相互切换的一个快捷方法，具体使用可以参考右边的案例：
fadeToggle() 会向元素添加淡入效果。如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
淡入效果fadeTo
淡入淡出fadeIn与fadeOut都是修改元素样式的opacity属性，但是他们都有个共同的特点，变化的区
间要么是0，要么是1
fadeIn：淡出效果，即要显示出来，opacity是0到1 fadeOut：淡入效果，即要隐藏出来，opacity是1到0 如果要让元素保持动画效果，执行opacity = 0.5的效果时，要如何处理？ 如果不考虑CSS3，我们用JS实现的话，基本就是通过定时器，在设定的时间内一点点的修改opacity的 值，最终为0.5，原理虽说简单，但是总不如一键设置这么舒服，jQuery提供了fadeTo方法，可以让改 变透明度一步到位
项目10 jQuery的事件与动画
1.事件：
事件类型
页面加载响应事件 鼠标事件
表单事件 键盘事件 浏览器事件
表10-1 jQuery常用事件方法
事件名称
ready(fn)
click(fn) dbclick(fn) mouseover(fn) mouseout(fn) mousedown(fn) mouseup(fn) mousemove(fn)
任务10.2 jQuery动画
1
隐藏与显示动画
2
滑动动画
3
淡入淡出动画
10.2.1 隐藏与显示动画
1.hide()方法 格式如下： $("选择器").hide([speed,easing,callback]);
2.show()方法 格式如下： $("选择器").show([speed,easing,callback]); show()方法的参数与hide()方法的参数的设置方式一样。
10.1.2 事件的绑定
4.one()方法：
使用one()方法为指定选择器元素添加一个 “只触发一次”的事件，格式如下：
$("选择器").one("事件名", [数据对 象],function(){
事件处理代码; }); $("#btn" ) .one ("click",function () {
用于把元素的透明度指定为某个值（值介于0与1之间）， 并不会隐藏元素，格式如下：
$("选择器").fadeTo(speed,opacity,[callback]);
总结
通过选择器查找元素后，解绑存在的多个事件名，格式如下： $("选择器").off("事件名1 事件名2…"); $(".current").off("mouseover mouseout"); //将类名为current元素的鼠标进入和退出事件解绑
第8章 jQuery动画
1、fadeIn()和fadeOut()
• 在jQuery中，我们可以使用fadeIn()方法来实现元素的淡入效果，可以 使用fadeOut()方法来实现元素的淡出效果。一般情况下，fadeIn()和 fadeOut()这两个方法都是配合一起使用的。
$().fadeToggle(speed, fn)
3、fadeTo()
• 在淡入效果中，透明度（opacity属性）是从0变化到1。在淡出效果中， 透明度是从1变化到0的。在jQuery中，如果想要将元素透明度指定到 0~1之间的某个值，可以使用fadeTo()方法。
• 语法：
$().fadeTo(speed, opacity, fn)
• 语法：
$().slideToggle(speed, fn)
8.5 自定义动画
• 为了满足实际开发中各种动画设计的需求，jQuery为我们提供了一种 “自定义动画”的解决方案。
• 对于自定义动画，我们分为以下3个方面来介绍。 ➢ 简单动画 ➢ 累积动画 ➢ 回调函数
1、简单动画
• 在jQuery中，对于自定义动画，我们都是使用animate()方法来实现的。 • 语法：
3、回调函数
• 使用回调函数，可以使得在动画执行完成之后，再执行某些操作。
8.6 队列动画
• 在jQuery中，队列动画，指的是元素按照一定的顺序来执行多个动画效 果。
• 语法： $().animate().animate().…….animate()
• 在jQuery中，队列动画可以是任何动画形式，包括：显示与隐藏、淡入 与淡出、滑上与滑下、自定义动画等。
jQuery之动画效果大全
jQuery之动画效果⼤全下⾯介绍了⼏种动画效果的⽅法，具体如下：1、show()显⽰效果语法：show(speed,callback) Number/String,Function speend为动画执⾏时间，单位为毫秒。
也可以为slow","normal","fast" callback可选,为当动画完成时执⾏的函数。
show(speed,[easing],callback) Number/String easing默认是swing,可选linear; $("#div1").show(3000,function(){ alert("动画显⽰完成!"); }); 2、hide()隐藏效果语法:hide(speed,callback) Number/String,Functionhide(speed,easing,callback) Number/String $("#div1").hide(3000,function(){ alert("动画隐藏完成") });3、toggle()隐藏显⽰⾃动切换，当⽬前为显⽰则隐藏，当⽬前为隐藏则显⽰语法：toggle(speed,callback) Number/String,Function toggle(speed,callback) Number/String,String,Function $("#div1").toggle(3000,function(){ alert("动画效果切换完成") });4、slideDown()向下显⽰，slow()是⽔平与垂直⽅向同时展开，⽽slideDown是仅仅在垂直⽅向向下展开语法:slideDown(speed,callback) Number/String,Function slideDown(speed,[easing],callback) Number/String,Function $("#div1").slideDown(3000,function(){ alert("向下展开显⽰成功!"); });5、slideUp()向上隐藏, hide()是⽔平与垂直两个⽅向的，⽽slideUp()仅仅是垂直⽅向向上收起隐藏语法:slideUp(speed,callback) Number/String,Function slideUp(speed,[easing],callback) Number/String,String,Function $("#div1").slideUp(3000,function(){ alert("向上收起隐藏成功!"); })6、slideToggle垂直⽅向上切换,toggle是⽔平与垂直两个⽅向上的，⽽slideToggle是仅仅垂直⽅向的。
jQuery动画效果代码分享
jQuery动画效果代码分享⼀．显⽰、隐藏jQuery 中显⽰⽅法为：.show()，隐藏⽅法为：.hide()。
在⽆参数的时候，只是硬性的显⽰内容和隐藏内容。
$('.show').click(function(){ //设置个触发事件$('#box').show(); //显⽰});$('.hide').click(function(){ //设置个触发事件$('#box').hide(); //隐藏});在.show()和.hide()⽅法可以传递⼀个参数，这个参数以毫秒(1000 毫秒等于 1 秒钟)来控制速度。
并且⾥⾯富含了匀速变⼤变⼩，以及透明度变换。
$('.show').click(function(){$('#box').show(1000); //显⽰⽤了 1 秒}); $('.hide').click(function(){$('#box').hide(1000); //隐藏⽤了 1 秒});除了直接使⽤毫秒来控制速度外，jQuery 还提供了三种预设速度参数字符串：slow、 normal 和 fast，分别对应 600 毫秒、400 毫秒和 200 毫秒。
$('#box').show('slow'); //600 毫秒$('#box').show('normal'); //400 毫秒$('#box').show('fast'); //200 毫秒注意：不管是传递毫秒数还是传递预设字符串，如果不⼩⼼传递错误或者传递空字符串。
那么它将采⽤默认值：400 毫秒。
使⽤.show()和.hide()的回调函数，可以实现列队动画效果。
（1）使⽤函数名调⽤⾃⾝$('.show').click(function(){$('#box').show('slow',function showspan(){$(this).next().show('slow',showspan);});})（2）使⽤ arguments.callee 匿名函数⾃调⽤$('.show').click(function(){$('#box').show('slow',function(){$(this).next().show('slow',arguments.callee);});})我们在使⽤.show()和.hide()的时候，如果需要⼀个按钮切换操作，需要进⾏⼀些条件判断。
jQuery三组基本动画与自定义动画操作实例总结
jQuery三组基本动画与⾃定义动画操作实例总结⽬录1、显⽰（show）与隐藏（hide）1.1 show⽅法1.2 hide⽅法1.3 原理2、滑⼊（sliderDown）与隐藏（sliderUp）2.1 ⽤法2.2 滑⼊画出切换（slideToggle）2.3 原理3、淡⼊（fadeIn）与淡出（fadeOut）3.1 ⽤法3.2 淡⼊淡出切换（fadeToggle）3.3 淡⼊淡出到某个值（fadeTo）4、三组基本动画总结5、⾃定义动画（animate）6、easing参数7、动画队列8、停⽌动画8.1、stop()8.2、判断元素是否处于动画状态本⽂实例讲述了jQuery三组基本动画与⾃定义动画操作。
分享给⼤家供⼤家参考，具体如下：jQuery提供了三组基本动画，分别是显⽰与隐藏、淡⼊与淡出、滑⼊与画出，这三组基本动画都是标准的、有规律的的效果，jQuery还提供了⼀个⾃定义动画。
1、显⽰（show）与隐藏（hide）显⽰(show)与隐藏(hide)是⼀组动画1.1 show⽅法show([speed,[easing],[callback]])参数speed，可选，动画的执⾏时间如果不传，就没有动画效果。
毫秒值(⽐如1000),动画在1000毫秒执⾏完成(推荐)固定字符串，slow(200)、normal(400)、fast(600)，如果传其他字符串，则默认为normal。
参数callback，可选，执⾏完动画后执⾏的回调函数，每个元素执⾏⼀次。
参数easing，可选，这⾥先不讲，后⾯统⼀讲1.2 hide⽅法与show⽅法的⽤法完全⼀致。
1.3 原理show和hide修改的是元素的width、height、opacity。
2、滑⼊（sliderDown）与隐藏（sliderUp）滑⼊(slideUp)与滑出(slideDown)是⼀组动画，效果与卷帘门类似slideUp/slideDown,使⽤⽅法与show/hide基本⼀致。
JQuery 动画和UI
dialog(options)
options:{key:value, … …}形式，键 autoOpen:true 调用方法时自动打开 modal:true 模式对话框，起遮罩效果 show:null 定义动画，slide scale size clip blind 定义动画，slide draggable:true是否可以拖拽 draggable:true是否可以拖拽 resizable:true是否可以重定义大小 resizable:true是否可以重定义大小 width,height定义对话框高度宽度 width,height定义对话框高度宽度 buttons:{“title”:function(){},……} buttons:{“title”:function(){},……} 定义按钮
show()无动画的版本 show()无动画的版本 Speed指定动画完成的时间，毫秒为单位， Speed指定动画完成的时间，毫秒为单位， 预设速度:fast(0.2秒),slow(0.6),normal(0.4)。 预设速度:fast(0.2秒),slow(0.6),normal(0.4)。 callback动画显示完成后可选的触发回调函数 callback动画显示完成后可选的触发回调函数
滑动动画方法
仅使用滑动渐变效果。 slideDown(speed[,callback])通过高度变化向下 slideDown(speed[,callback])通过高度变化向下 增大，来动态显示选择的元素。 slideUp(speed[,callback])通过高度变化向上减 slideUp(speed[,callback])通过高度变化向上减 小来动态隐藏选择的元素。 slideToggle(speed[,callback])通过高度变化切 slideToggle(speed[,callback])通过高度变化切 换选择的元素。
jquery中的事件与动画
一、$(document).ready()方法与window.onload方法之间的细微区别1. 执行时机Window.onload方法是在网页中所有的元素（包括元素的所有关联文件）完全加载到浏览器后才执行。
通过jquery中的$(document).ready()注册的事件处理程序，在DOM完全就绪时就可以被调用。
Ps：如果元素的关联文件未下载完，避免出错，则使用load()方法。
load()方法会在元素的onload事件中绑定一个处理函数，如果处理函数绑定给window对象，则会在所以内用（包括窗口、框架、对象和图像等）加载完毕后触发；如果处理函数绑定在元素上，则会在元素的内容加载完毕后触发。
代码如下：$(window).load(function(){//编写代码})Js中window.onload=function(){//编写代码}2.多次使用Js中onload事件一次只能保存对一个函数的引用，会自动用后面的函数覆盖前面的函数。
而jQuery中的$(document).ready()方法每次调用时，$(document).ready()方法都会在现有的行为上追加新的行为，这些行为函数会根据注册的顺序一次执行3.简写方式：$(function(){})$().ready(function(){})二、事件绑定——bind(type,[data],fn)第一个参数是事件类型，类型包括：blur（失去焦点）、focus（得到焦点）、load、resize、scroll、unload、click、dbclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup和errror等，也可以是自定义名称。
第二个参数为可选参数，作为event.data属性值传递给事件对象的额外数据对象第三个参数则是用来绑定的处理函数三、合成事件——hover()方法，toggle()方法hover(enter,leave) 用于模拟光标悬停事件。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
练习
• QQ切换用户风格 • 无刷新评论最终版本
您的潜力 们的动力！
Your potential
Our passion!
• 例子：animate({ left: 0, top: 0, width: 300, height: 300 }，1000).animate({ opacity: 0 }).animate({ opacity: 1 })。
• 还可以指定增量$(“#div1”).animate({ height: “+=100” }); //如果是+=、-=等增量形式要写成字符串， 因为JavaScript不认识这种语法
jQuery之xml
操作xml
• show() • hide() • fadeIn() • fadeOut() • slideUp() • slideDown()
基本效果
控制速度
• show()、hide()方法会显示、隐藏元素。用toggle()方法在显示、隐 藏之间切换
• $(":button[value=show]").click(function() { $("div").show(); }); • $(":button[value=hide]").click(function() { $("div").hide(); }); • 如果show、hide方法不带参数则是立即显示、立即隐藏，如果指定
速度参数则会用指定时间进行动态显示、隐藏，单位为毫秒，也可以 使用三个内置的速度：fast（200毫秒）、normal（400毫秒）、 slow（600毫秒），jQuery动画函数中需要速度的地方一般也可以使 用这个三个值，如：toggle、slideDown、slideUp这几个函数
复杂动画
• animate：anmite内部设置的多个值是同步变化的，链式 的animate是依次动画的。