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

jQuery开发实战

教学设计

课程名称： jQuery开发实战____________ 授课年级： _______________________ 授课学期： _______________________ 教师姓名： _______________________

20XX年03月01日

课程名称第7章jQuery动画计划

学时

4学时

内容分析本章主要介绍动画基础、自定义动画、动画高级教学目标

与

教学要求

要求学生了解动画相关的高级内容、掌握基础动画的使用方法、掌握自定义动画的使用方法

教学重点动画基础、自定义动画、动画高级教学难点自定义动画、动画高级

教学方式课堂讲解及ppt演示

动画队列

如果给一个元素分别添加多个animate()动画，会怎么样呢？演示代码参考教材7.3.1节。

如果按照原生JavaScript去考虑上面的代码，会认为动画是一个异步操作，当多个动画被调用时，应该同时执行。但实际效果却是按顺序执行，这是因为jQuery在源码内部做了一个动画队列，将多个animate()存储到这个队列中，然后队列中每个动画按顺序执行。

理解了动画队列的概念后，来看一些特殊操作中的队列问题，演示代码参考教材7.3.1节。

用鼠标指针快速多次移入移出方块，会产生多个animate()动画，它们被添加到动画队列中，依次执行完毕后方可停止。下面来看如何解决这个问题，可以在每次调用animate()动画前，先把上一次的动画停止，再开启新的动画。演示代码参考教材7.3.1节。

关闭动画与判断动画

jQuery.fx.off属性设置为true时，可以关闭页面中所有的动画效果，演示代码参考教材7.3.2节。

is(':animated') 判断当前元素是否处于动画状态，演示代码参考教材7.3.2节。

合理地利用判断动画的方式，可以在一定时间内对动画进行节流操作，避免多次触发animate()动画。

扩展tween算法

Tween算法是一套来自于Flash的运动算法，后来在其他很多语言中都有实现，在JavaScript也可以利用Tween算法来得到其他运动形式，演示代码参考教材7.3.3节。

还要注意，在jQuery中，是通过jQuery.easing对象来实现扩展的，并且jQuery. Easing对象下的方法都包含5个参数，所以，为了匹配，Tween 中需要在每个方法前面添加一个占位的参数p，变成5个参数p, t, b, c, d。第三个参数设置不同值，可产生不同的运动形式，如弹性、碰撞等，演示代码参考教材7.3.3节。

第三课时

上机练习（总结、练习题）

1. 总结本章内容。

2. 通过题库发送相关测试题，检查学生掌握情况。

上机练习主要针对本章中需要重点掌握的知识点，以及在程序中容易出错的内容进行练习，通过上机练习可以考察同学对知识点的掌握情况，对代码的熟练程度。

第四课时

上机练习（总结、练习题）

1. 总结本章内容

2. 通过题库发送相关测试题，检查学生掌握情况。

上机练习主要针对本章中需要重点掌握的知识点，以及在程序中容易出错的内容进行练习，通过上机练习可以考察同学对知识点的掌握情况，对代码的熟练程度。

习题教材第7章习题

教

学

后

记