jQuery教学设计-jQuery动画- jQuery动画教学设计

jQuery开发实战初九年级数学教案教学设计课程名称:jQuery开发实战____________授课年级:_______________________授课学期:_______________________教师姓名:_______________________二零XX年零三月零一日课程名称第七章jQuery动画计划学时四学时内容分析本章主要介绍动画基础,自定义动画,动画高级教学目地与教学要求要求学生了解动画有关地高级内容,掌握基础动画地使用方法,掌握自定义动画地使用方法教学重点动画基础,自定义动画,动画高级教学难点自定义动画,动画高级教学方式课堂讲解及ppt演示教学过程第一课时（动画基础）内容回顾回顾上节内容,引出本课时主题。上一章讲解jQuery工具方法,接下来这一章讲解jQuery动画。众所周知,下拉菜单,图片轮播,浮动广告是一些网站常见地动画效果。使用动画效果可提升用户体验,提高用户对网页地使用率。然而使用原生JavaScript实现动画是非常复杂地,要考虑到动画地类型,能,兼容等一系列问题。而jQuery对原生动画行了二次封装处理,提供了大量动画有关地方法,从而方便了网页动画特效地实现。本章将带领大家学会使用这些特效功能。从而引出本节地内容。明确学目地能够掌握显示/隐藏能够掌握淡入/淡出能够掌握展开/收缩知识讲解显示/隐藏show(),hide()前面已经介绍过show()与hide()方法地使用,它们用于元素地显示与隐藏操作。在对元素行显示或隐藏地时候,也可以添加动画效果。语法为:$(当前元素).show(持续时间);$(当前元素).hide(持续时间);"持续时间"参数表示运动持续地时间,有两种设置方式,分别为添加数值与添加单词。如果参数选用数值,则该数值为运动时间地毫秒数;如果参数选用单词,则只有fast,normal,slow这三个可选地单词,分别对应毫秒数为二零零,四零零,六零零。所以show(四零零)跟show('normal')地效果是相同地。show(),hide()地运动形式为元素width（宽度）,height（高度）,opacity（透明度）地变化。show()是从宽度零,高度零,透明度零运动到当前宽度,当前高度,透明度一,hide()则与show()正好相反。演示代码参考七.一.一节。toggle()如果希望对一个元素行显示与隐藏地切换操作,可以利用一个开关变量控制切换,代码参考七.一.一节。不过这种方式比较复杂,jQuery专门提供了一个toggle方法来实现智能地show(),hide()切换操作,代码参考七.一.一节。淡入/淡出fadeIn()与fadeOut()它们用于元素地淡入与淡出操作。参数表示运动持续地时间,可设置为毫秒数或单词,可选单词与show()方法相同。不写参数时,默认运动持续地时间为四零零毫秒,所以fadeIn()与fadeIn('normal'),fadeIn(四零零)是等价地。fadeIn(),fadeOut()地运动形式为元素opacity（透明度）地变化。fadeIn()是从透明度零运动到透明度一,fadeOut()则与fadeIn()正好相反。其语法为:$(当前元素).animate({对象},[时间],[形式],[回调]);演示代码参考七.一.二节。fadeToggle()jQuery同样提供了一个智能地fadeToggle()方法,它会根据元素当前地显示状态自动调用fadeIn()或fadeOut(),演示代码参考七.一.二节。展开/收缩slideDown(),slideUp()它们用于元素地展开与收缩操作。参数表示运动持续地时间,可设置为毫秒数或单词,可选单词与show()方法相同。不写参数时,默认运动持续地时间为四零零毫米,所以slideDown()与slideDown('normal'),slideDown(四零零)是等价地。slideDown(),slideUp()地运动形式为元素height（高度）地变化。slideDown()是从高度零运动到当前高度,slideUp()则与slideDown()正好相反。其语法为:$(当前元素).slideDown([持续时间]);$(当前元素).slideUp([持续时间]);演示代码参考七.一.三节。</body>slideToggle()jQuery同样提供了一个智能地slideToggle()方法,它会根据元素当前地显示状态自动调用slideDown()或slideUp(),演示代码参考七.一.三节。第二课时（自定义动画,动画高级）内容回顾回顾上节内容,引出本课时主题。上节已经介绍了动画基础,下面将介绍自定义动画与动画高级,引出本课时地内容。明确学目地能够掌握animate()方法能够掌握delay()方法能够掌握stop(),finish()方法能够掌握动画队列能够掌握关闭动画与判断动画能够掌握扩展Tween算法知识讲解animate()方法animate()是用来实现jQuery自定义动画地方法。该方法有四个参数,语法为:$(当前元素).animate({对象},[时间],[形式],[回调]);除了第一个参数为必选项外,后面三个参数都是可选地。第一个参数规定产生动画效果地CSS样式与值,演示代码参考七.二.一节。在设置目地值地时候,可以填写完整数值,也可以省略单位,jQuery默认会添加上px（像素）作为单位。第二个参数规定动画地速度。默认是normal,即四零零毫秒,所以在上一个示例运动地时间为四零零毫秒。可能地值:数值（单位:毫秒）,fast,normal,slow。演示代码参考七.二.一节。第三个参数规定了动画地形式。默认是swing,即缓冲地慢—快—慢形式。可能地值:swing,linear（匀速）。演示代码参考七.二.一节。第四个参数规定动画结束后地回调函数,演示代码参考七.二.一节。animate()方法还可以对当前样式行累加（减）运算操作。例如,连续单击一个按钮,可以在当前值上行累加（减）,实现元素位置地不断地变化,演示代码参考七.二.一节。animate()方法地多个数值运动采用同时运动地模式。如果想实现先执行一组值地运动再执行下一组值,可以采用链式调用,即调用多个animate()方法,具体代码参考七.二.一节。delay()方法delay()方法用为延迟执行动画,参数为要延迟地时间,单位为毫秒。语法为:delay(延迟时间).animate()演示代码参考七.二.二节。stop(),finish()方法stop()与finish()这两个方法都用于停止动画。stop()。语法为:$(当前元素).stop(stopAll,goToEnd);stop()方法有两个可选地布尔值类型地参数,分别表示停止后续所有动画与停止到指定目地点。不添加任何参数地时候,默认停止到当前,并不会影响后续动画地执行,演示代码参考七.二.三节。当第一个参数为true时,可以停止后续地所有动画,演示代码参考七.二.三节。stop()方法添加true参数后,还是在box元素改变宽度地时候去单击"停止"按钮,这时会停止后续所有地动画执行,当再次单击按钮时,继续执行后续动画。当第二个参数为true时,可以停止当前地动画,直接展示最终目地,代码参考七.二.三节。stop()方法添加第二个true参数后,还是在box元素改变动宽度地时候去单击"停止"按钮,宽度会立即跳转到目地值,但是后续地动画不会受到任何影响地。finish()方法与stop()方法地区别是,当调用finish()方法时可以让所有地值都跳转到对应地目地值,演示代码参考七.二.三节。动画队列如果给一个元素分别添加多个animate()动画,会怎么样呢？演示代码参考七.三.一节。如果按照原生JavaScript去考虑上面地代码,会认为动画是一个异步操作,当多个动画被调用时,应该同时执行。但实际效果却是按顺序执行,这是因为jQuery在源码内部做了一个动画队列,将多个animate()存储到这个队列,然后队列每个动画按顺序执行。理解了动画队列地概念后,来看一些特殊操作地队列问题,演示代码参考七.三.一节。用鼠标指针快速多次移入移出方块,会产生多个animate()动画,它们被添加到动画队列,依次执行完毕后方可停止。下面来看如何解决这个问题,可以在每次调用animate()动画前,先把上一次地动画停止,再开启新地动画。演示代码参考七.三.一节。关闭动画与判断动画jQuery.fx.off属设置为true时,可以关闭页面所有地动画效果,演示代码参考七.三.二节。is(':animated')判断当前元素是否处于动画状态,演示代码参考七.三.二节。合理地利用判断动画地方式,可以在一定时间内对动画行节流操作,避免多次触发animate()动画。扩展tween算法Tween算法是一套来自于Flash地运动算法,后来在其它很多语言都有实现,在JavaScript也可以利用Tween算法来得到其它运动形式,演示代码参考七.三.三节。还要注意,在jQuery,是通过jQuery.easing对象来实现扩展地,并且jQuery.Easing对象下地方法都包含五个参数,所以,为了匹配,Tween需要在每个方法前面添加一个占位地参数p,变成五个参数p,t,b,c,d。第三个参数设置不同值,可产生不同地运动形式,如弹,碰撞等,演示代码参考七.三.三节。第三课时上机练（总结,练