第5章 jQuery动画ppt课件.ppt
《第5章 jQuery动画ppt课件.ppt》由会员分享,可在线阅读,更多相关《第5章 jQuery动画ppt课件.ppt(35页珍藏版)》请在淘文阁 - 分享文档赚钱的网站上搜索。
1、在此输入您的封面副标题第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
2、停止动画停止动画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(“动画执行完成动画执行
3、完成”) )show( speed , easing , fn )动画速度动画速度动画效果动画效果回调函数回调函数元素显示隐藏显示方法参数介绍:显示方法参数介绍: 5.1 常用动画$(selector).toggle()元素是否隐藏元素是否隐藏元素隐藏元素隐藏是是元素显示元素显示否否元素显示隐藏使用使用toggle方法切换元素显示、隐藏状态:方法切换元素显示、隐藏状态: 5.1 常用动画元素显示隐藏知识点概述隐藏图形隐藏图形$(div).hide();显示图形显示图形知识点概述$(div).show(1000, function() $(div).css(border-radius, 50%)
4、;)知识点概述切换显示隐藏效果切换显示隐藏效果$(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
5、()、fadeout()、fadeTo()、fadeToggle() 5.1 常用动画元素淡入淡出 5.1 常用动画元素淡入淡出 “亮灯泡”“暗灯泡”开灯关灯案例:开灯关灯案例:页面中有两张图片,分别是“亮灯泡”和“暗灯泡” 当“亮灯泡”图淡入页面、同时“暗灯泡”图淡出页面时,页面就产生了灯泡被点亮的效果 5.1 常用动画元素淡入淡出单击单击“开灯开灯”按钮按钮1“暗灯泡暗灯泡”淡出页面淡出页面2“暗灯泡暗灯泡”淡出页面之后,淡出页面之后,“亮灯泡亮灯泡”淡入页面淡入页面3“亮灯泡亮灯泡”显示之后,设置按钮值为显示之后,设置按钮值为“灯亮了灯亮了”4把两张图片都以动画的设置为透明度为把两张图片
6、都以动画的设置为透明度为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()方法传入第三
7、个参数-回调函数$(.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 常用动画星空闪烁案例展示页面中星星通过改变透明度不断地
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 第5章 jQuery动画ppt课件 jQuery 动画 ppt 课件
限制150内