《JQuery实战进阶：“web技能”》课件-第六章 jQuery动画

JQuery应用开发——jQuery动画目录6.1显示与隐藏效果6.2滑动效果6.3案例-下拉菜单效果6.4淡入淡出效果6.5自定义动画6.6停止元素动画的方法JQuery应用开发——显示与隐藏效果目录CONTENTDCAB常用动画：显示隐藏学习目标E停止动画自定义动画常用动画：上滑下滑常用动画：淡入淡出常用动画显示隐藏上滑下滑淡入淡出010302显示与隐藏效果元素显示隐藏方法描述show([speed,[easing],[fn]])显示隐藏的匹配元素hide([speed,[easing],[fn]])隐藏显示的匹配元素toggle([speed],[easing],[fn])元素显示与隐藏切换实现方法：show()、hide()、toggle()方法显示与隐藏效果show([speed,[easing],[fn]])动画速度动画效果回调函数参数介绍：

元素显示隐藏–show()显示在动画完成执行时执行的函数参数描述speed动画速度，取值为预定义字符串(“slow”,”normal”,”fast”)或表示动画时长的毫秒数值。（如1000表示1秒）easing用来指定切换速度，默认是swing，可用参数linearfn在动画完成时执行的函数，每个元素执行一次显示与隐藏效果传入时间参数$('div').show(1000)传入回调函数$('div').show(1000，function(){alert(“动画执行完成”)})元素显示隐藏–show()显示最简形式$('div').show()在动画完成执行时执行的函数显示与隐藏效果元素显示隐藏–hide()隐藏传入时间参数$('div').hide(1000)传入回调函数$('div').hide(1000，function(){alert(“动画执行完成”)})最简形式$('div').hide()显示与隐藏效果$(selector).toggle()元素显示？元素隐藏是元素显示否使用toggle方法切换元素显示、隐藏状态：元素显示隐藏–toggle()切换总结show()显示01hide()隐藏0203toggle()切换课后练习说明：单击隐藏按钮，将div在1秒内隐藏单击显示按钮，将div在1秒内显示，显示完成后将div变为圆形。单击切换按钮，div在显示与隐藏之间切换JQuery应用开发——滑动效果常用动画显示隐藏淡入淡出上滑下滑010302滑动效果方法说明slideDown([speed],[easing],[fn])垂直滑动显示匹配元素（向下增大）slideUp([speed],[easing],[fn])垂直滑动显示匹配元素（向上减小）slideToggle([[speed],[easing],[fn]])在上滑和下滑两种效果间的切换上滑、下滑与切换效果：slideDown()、slideUp()、slideToggle()滑动效果传入时间参数$('div').slideDown(1000)传入回调函数$('div').slideDown(1000，function(){alert(“动画执行完成”)})slideDown([speed,[easing],[fn]])动画速度动画效果回调函数参数介绍：最简形式$('div').slideDown()在动画完成执行时执行的函数滑动效果案例演示：滑动效果$('input').click(function(){ //为slideUp()方法传入第三个参数-回调函数$('.wrapdiv:first').slideUp(1500,function(){//在slideUp上滑动画完成之后执行slideUp$('.wrapdiv:eq(1)').slideUp(1000);});});传入函数体作为回调函数使用回调函数让两个动画相继执行滑动效果值得一提slideDown/slideUp：未传入动画速度参数情况下，也有动画效果show/hide：在未传入动画速度参数时无动画效果总结slideDown（）下滑效果01slideUp（）上滑02slideToggle（）切换03课后练习实现手机模型上滑效果JQuery应用开发案例—下拉菜单01任务导入提出任务目录CONTENT02分析任务03任务实施04归纳总结0501任务导入

下拉菜单是我们司空见惯的效果，鼠标放到主菜单上，二级菜单从上滑出，鼠标离开后，菜单从下向上滑入后隐藏02提出任务本次课任务制作下拉菜单案例效果案例效果：03任务分析任务分析：案例效果：制作二级菜单案例效果鼠标放到主菜单上时，二级菜单以动画下滑的形式展示鼠标离开后，二级菜单以上滑的形式慢慢隐藏实践：让我们动手实践一下吧04任务实施05归纳总结核心代码

var$menu=$('#nav>ul>li') $menu.mouseenter(function(){

$(this).children('.sub_menu').slideDown(600) }).mouseleave(function(){ $(this).children('.sub_menu').slideUp(600) })上滑隐藏下滑出现事件：mouseenter（）mouseleave（）01children（）slideDown（）slideUp（）0205归纳总结JQuery应用开发——淡入淡出效果常用动画显示隐藏淡入淡出上滑下滑010302淡入淡出效果方法说明fadeIn([speed],[easing],[fn])淡入显示匹配元素fadeOut([speed],[easing],[fn])淡出隐藏匹配元素fadeToggle([speed,[easing],[fn]])在fadeIn()和fadeOut()两种效果间的切换fadeTo([[speed],opacity,[easing],[fn]])以淡入淡出方式将匹配元素调整到指定的透明度jQuery实现淡入、淡出、动画形式改变透明度：

fadeIn()、fadeout()、fadeToggle()、fadeTo()淡入淡出效果传入时间参数$('div').fadeIn(1000)传入回调函数$('div').fadeIn(1000，function(){alert(“动画执行完成”)})fadeIn([speed,[easing],[fn]])动画速度动画效果回调函数参数介绍：最简形式$('div').fadeIn()在动画完成执行时执行的函数淡入淡出效果淡入淡出效果

<div><imgsrc="img/on.gif"><imgsrc=“img/off.gif"></div>“亮灯泡”“暗灯泡”开灯关灯案例：页面中有两张图片，分别是“亮灯泡”和“暗灯泡”当“亮灯泡”图淡入页面、同时“暗灯泡”图淡出页面时，页面就产生了灯泡被点亮的效果按钮的文字也在“开灯”和“关灯”直接切换淡入淡出效果案例效果核心代码：总结fadeIn([speed],[easing],[fn])01fadeOut([speed],[easing],[fn])020304fadeToggle([speed],[easing],[fn])fadeTo([speed],opacity,[easing],[fn])课后实践实现焦点图淡入淡出效果JQuery应用开发——自定义动画自定义动画语法：$(selector).animate(styles,[speed],

[callback]);参数：styles表示动画执行目标样式属性和值组合成的键值对,必选speed表示动画的执行时间，单位是毫秒callback表示动画执行完成之后的回调函数1.简单自定义动画animate()自定义动画$('#box').animate({'left':'200px'},2000)

.animate({'width':'200px','height':'200px'},2000)案例演示：用div做成的小球，在2秒内移动到200px的位置到达位置后，小球变大1.简单自定义动画$('#box').animate({'left':'200px'},2000,function(){ $(this).animate({'width':'200px','height':'200px'},2000) })方式一方式二自定义动画雪花先向右分散1部分雪花下落2另一部分雪花放大3放大后雪花下落41.简单自定义动画自定义动画1.简单自定义动画自定义动画$('input').click(function(){$('div').animate({

height:'+=100px',

width:'-=100px'

});});animate()方法的第一个参数是动画的目标样式属性和值组合成的键值对，每一项的值可以是带运算符的表达式。如：“+=100px”表示增大100px，

“-=100px”表示减少100px。2.加入表达式的动画$('div').animate({left:'500px'},3000).animate({height:'500px'},3000)

.css(‘background’,’red’)自定义动画思考：猜测一下是怎样的变化过程呢？？结论：

css()方法不会加入动画队列，所以div首先变色，，然后left变为500px，最后height变为500px自定义动画总结animate（）01动画队列02JQuery应用开发——停止元素动画的方法停止元素动画的方法例：下拉菜单引发问题：当鼠标快速在主级菜单上移入移出，二级菜单将回来伸展。哪怕鼠标都离开很久了，动画还在持续停止元素动画的方法动画队列：同一个元素上调用一个以上的动画方法，那么对这个元素来说，除了当前正在调用的动画，其他的动画将被放到效果队列中，这样就形成了动画队列。停止动画：用于停止动画效果，通过此方法，可以让动画队列后面的动画提前执行。1.停止动画stop（）停止元素动画的方法$(selector).stop(stopAll,goToEnd);参数：stopAll表示是否清除动画队列，默认是false；goToEnd表示是否立即完成当前的动画，默认是false。1.停止动画stop（）停止元素动画的方法$('div').stop();

停止当前动画，继续下一个动画$('div').stop(true);清除div元素动画队列中的所有动画$('div').stop(true,true);停止当前动画，清除动画队列中的所有动画$('div').stop(false,true);停止当前动画，继续执行下一个动画停止动画的方法的使用方式：1.停止动画停止元素动画的方法1.停止动画停止元素动画的方法2.判断元素是否在动画状态使用方式：

$(selector).is(‘:animated’)返回值：元素处于动画状态，返回值为true，否则返回值为false总结stop（）01$(selector).is(‘:animated’)02课后练习利用自定义动画及停止动画，实现仿钢琴效果的导航条JQuery应用开发案例—雪花飘飘01任务导入提出任务目录CONTENT02分析任务03任务实施04归纳总结0501任务导入

。学习了节点操作，事件，动画等内容后，利用所学知识，制作模仿飘雪花的效果。02提出任务本次课任务实现“雪花飘飘”效果案例效果：03任务分析任务分析：初始状态下，页面中只有背景图，无雪花，使用创建元素的方法$(),创建图片元素，设置元素的相关属性，大小在5-45像素范围内之间位置随机，水平方向的范围不超过页面的宽度。垂直方向在页面上方100px范围内随机。雪花的动画执行时间在5000-8000毫秒的范围内随机雪花的透明度在0.7-1范围内随机雪花下落到页面高度的时候，删除雪花配合定时器，可