第5章 jQuery动画ppt课件.ppt
在此输入您的封面副标题第5章 jQuery动画第5章 jQuery动画常用动画的使用动画方法的回调函数使用自定义动画的使用停止动画 学习目标熟悉掌握掌握熟悉jQuery中常用动画的使用12掌握jQuery中如何自定义动画掌握jQuery中停止动画的作用及使用3 目录自定义动画5.25.25.15.1常用动画方法停止动画5.35.3点击查看本小节知识架构点击查看本小节知识架构点击查看本小节知识架构 知识架构5.1 常用动画常用动画1元素的显示和隐藏2元素的淡入和淡出3元素滑入和滑出4【案例】星空闪烁 知识架构5.2 自定义动画方法自定义动画方法1简单自定义动画2加入表达式的动画 知识架构5.3 停止动画停止动画1停止元素动画的方法2判断元素是否处于动画状态3【案例】导航下拉列表 5.1 常用动画元素显示隐藏方法方法描述描述show(speed,easing, fn)显示隐藏的匹配元素hide(speed,easing, fn)隐藏显示的匹配元素toggle(speed,easing, fn)元素显示与隐藏切换jQuery实现实现显示、隐藏显示、隐藏：show()、hide()、toggle()方法 5.1 常用动画传入时间参数传入时间参数$(div).show(1000)传入回调函数传入回调函数$(div).show(1000，function() alert(“动画执行完成动画执行完成”) )show( speed , easing , fn )动画速度动画速度动画效果动画效果回调函数回调函数元素显示隐藏显示方法参数介绍：显示方法参数介绍： 5.1 常用动画$(selector).toggle()元素是否隐藏元素是否隐藏元素隐藏元素隐藏是是元素显示元素显示否否元素显示隐藏使用使用toggle方法切换元素显示、隐藏状态：方法切换元素显示、隐藏状态： 5.1 常用动画元素显示隐藏知识点概述隐藏图形隐藏图形$(div).hide();显示图形显示图形知识点概述$(div).show(1000, function() $(div).css(border-radius, 50%);)知识点概述切换显示隐藏效果切换显示隐藏效果$(div).toggle(slow, linear); 5.1 常用动画方法说明说明fadeIn(speed,easing, fn)淡入显示匹配元素fadeOut(speed,easing, fn)淡出隐藏匹配元素fadeTo(speed,opacity,easing, fn)以淡入淡出方式将匹配元素调整到指定的透明度fadeToggle(speed,easing, fn)在fadeIn()和fadeOut()两种效果间的切换元素淡入淡出jQuery实现实现淡入、淡出、动画形式改变透明度淡入、淡出、动画形式改变透明度：fadeIn ()、hide()、fadeout()、fadeTo()、fadeToggle() 5.1 常用动画元素淡入淡出 5.1 常用动画元素淡入淡出 “亮灯泡”“暗灯泡”开灯关灯案例：开灯关灯案例：页面中有两张图片，分别是“亮灯泡”和“暗灯泡” 当“亮灯泡”图淡入页面、同时“暗灯泡”图淡出页面时，页面就产生了灯泡被点亮的效果 5.1 常用动画元素淡入淡出单击单击“开灯开灯”按钮按钮1“暗灯泡暗灯泡”淡出页面淡出页面2“暗灯泡暗灯泡”淡出页面之后，淡出页面之后，“亮灯泡亮灯泡”淡入页面淡入页面3“亮灯泡亮灯泡”显示之后，设置按钮值为显示之后，设置按钮值为“灯亮了灯亮了”4把两张图片都以动画的设置为透明度为把两张图片都以动画的设置为透明度为0.35 5.1 常用动画方法说明slideDown(speed,easing, fn)垂直滑动显示匹配元素（向下增大）slideUp(speed,easing, fn)垂直滑动显示匹配元素（向上向下）slideToggle(speed,opacity,easing, fn)在上滑和下滑两种效果间的切换元素上滑下滑jQuery实现实现滑入、滑出、动画形式改变透明度滑入、滑出、动画形式改变透明度：slideDown ()、slideUp ()、slideToggle() 5.1 常用动画$(input).click(function() /为slideUp()方法传入第三个参数-回调函数$(.wrap div:first).slideUp(1500, function() /在slideUp上滑动画完成之后执行slideUp$(.wrap div:eq(1).slideUp(1000);););传入函数体作为回调函数传入函数体作为回调函数元素上滑下滑使用回调函数让两个动画相继执行 5.1 常用动画值得一提值得一提p fadeIn / fadeOut、slideDown / slideUp：未传入动画速度参数情况下，也有动画效果p show / hide：在未传入动画速度参数时无动画效果元素上滑下滑 5.1 常用动画星空闪烁案例展示页面中星星通过改变透明度不断地隐藏、显示，在用户观察到的结果是背景图中的星星不断闪烁。 5.1 常用动画星空闪烁案例分析案例分析：案例分析：单击按钮后，以滑动的效果显示夜空设置滑动动画回调函数，在动画完成后开始执行星星闪烁功能 星星闪烁功能：开启一个间隔定时器，每隔500ms执行一次，小星星以显示隐藏和淡入淡出两种动画形式闪烁。 5.1 常用动画 $(input).click(function() $(.wrap).slideDown(1500, function() setInterval(twinkle, 500);); ); function twinkle() $(.starWrap img:even).toggle(10); $(.starWrap img:odd).fadeToggle(300); 星空闪烁案例实现案例实现：案例实现： 5.1 常用动画 $(input).click(function() $(.wrap).slideDown(1500, function() setInterval(twinkle, 500); ); ); function twinkle() $(.starWrap img:even).toggle(10); $(.starWrap img:odd).fadeToggle(300); 星空闪烁案例实现案例实现：案例实现： 5.2 自定义动画简单自定义动画自定义动画自定义动画：jQuery提供动画方法animate()，方便开发者设置动画效果用途用途：方便开发者设置动画执行形式语法语法：$(selector).animate(styles, speed, callback);参数参数：styles表示动画执行目标样式属性和值组合成的键值对，speed表示动画的执行时间，单位是毫秒，callback表示动画执行完成之后的回调函数 5.2 自定义动画 $(ul li).animate( marginLeft: 15px ，1000，function() $(ul li:odd).animate( marginTop: 25px, , 1500) )简单自定义动画案例演示：案例演示：把li元素的margin-left属性在1秒的时间内由当前状态改变为15像素。 并在动画完成之后，把所有索引值为奇数的li标签的margin-top值在1.5秒内改变为25像素。 5.2 自定义动画简单自定义动画雪花先向右分散雪花先向右分散1部分雪花下落部分雪花下落2另一部分雪花放大另一部分雪花放大3放大后雪花下落放大后雪花下落4雪花案例演示：雪花案例演示： 5.2 自定义动画$(input).click(function() $(div).animate( height: +=100px, width: -=100px ););加入表达式的动画animate()方法的第一个参数是动画的目标样式属性和值组合成的键值对，每一项的值可以是带运算符的表达式。如“+=100px”表示增大100px，“-=100px”表示减少100px。 5.2 自定义动画加入表达式的动画单击按钮单击按钮1“锦旗锦旗”同时增大同时增大height、left、top等属性值等属性值2动画完成后再同时减少动画完成后再同时减少height、left、top属性值属性值3 5.3 停止动画停止动画动画队列动画队列：同一个元素上调用一个以上的动画方法，那么对这个元素来说，除了当前正在调用的动画，其他的动画将被放到效果队列中，这样就形成了动画队列。停止动画停止动画：用于停止动画效果，通过此方法，可以让动画队列后面的动画提前执行。使用方式使用方式：$(selector).stop( stopAll , goToEnd );参数参数：stopAll表示是否清除动画队列，默认是false；goToEnd表示是否立即完成当前的动画，默认是false。 5.3 停止动画停止动画$(div).stop();停止当前动画，继续下一个动画$(div).stop(true);清除div元素动画队列中的所有动画$(div).stop(true, true);停止当前动画，清除动画队列中的所有动画$(div).stop(false, true);停止当前动画，继续执行下一个动画停止动画的方法的使用方式： 5.3 停止动画判断元素是否在动画状态使用方式使用方式：$(selector).is(:animated)返回值返回值：元素处于动画状态，返回值为true，否则返回值为false 5.3 停止动画导航下拉列表案例展示案例展示：案例展示：鼠标移入导航菜单时，展示对应的下拉菜单，改变此选项的背景色 鼠标移出导航菜单时，隐藏对应的下拉菜单，恢复原来的背景色 5.3 停止动画 女装 韩流时尚 日系森女 英伦帅气 欧美风尚 鼠标移入/移出“菜单项”时，让对应的“下拉菜单”显示/隐藏导航下拉列表案例分析菜单项下拉菜单案例分析：案例分析： 5.3 停止动画导航下拉列表案例实现 $(.nav). hover (function() $(this).find(.list) .stop() .slideDown(500); /移入时展示下拉菜单 , function() $(this).find(.list).stop().slideUp(500); /移出时隐藏下拉菜单 ).mousemove(function() $(this).css(background:#ff78f2); /移入时改变菜单项背景色 ).mouseleave(function() $(this).css(background: #e60ceb); /移出时恢复菜单项背景色 );为防止动画队列出现，在添加动画方法前使用stop()方法停止其他动画案例实现：案例实现： 本章小结本章首先介绍了jQuery中常用的动画特效，包括元素的显示与隐藏、元素的淡入和淡出以及元素的上滑和下滑。然后介绍了自定义动画的方法，使用这些方法可以做出更复杂的动画，最后介绍了停止动画方法stop()的使用。
