1. 您所在位置：
  2. 网站首页
  3. 文档分类
  4. 计算机
  5. Web服务

《web前端技术》 教案 第29课 jQuery的动画效果.docx

《web前端技术》 教案 第29课 jQuery的动画效果.docx

    1. 1、本文档共7页，可阅读全部内容。
    2. 2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
    3. 3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
    4. 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
    PAGE 6 PAGE 6 PAGE 5 PAGE 5 课题 第29课 jQuery的动画效果 课时 2课时（90 min） 教学目标 知识技能目标： 掌握 jQuery 的动画效果，包括元素的隐藏与显示、元素的淡入淡出和元素的滑动效果等 素质目标： （1）提高自我学习能力，增强自信心 （2）培养良好的学习方法，增强举一反三的能力 教学重难点 教学重点：jQuery 元素的隐藏与显示和淡入淡出效果 教学难点：元素的滑动效果 教学方法 问答法、讨论法、讲授法、实践练习法、演示法 教学用具 电脑、投影仪、多媒体课件、教材、APP 教学设计 第1节课：课前任务→考勤（2min）→问题导入（3min）→传授新知（20min）→实战拓展（20min） 第2节课：实战演练（25min）→实战拓展（15min）→课堂小结（3min）→作业布置（2min） 教学过程 主要教学内容及步骤 设计意图 第一节课 课前任务 【教师】布置课前任务，把和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，完成课前任务 了解jQuery动画效果 【学生】完成课前任务 通过课前任务，让学生提前了解jQuery动画效果，为课堂上学习相关知识点做准备 考勤 （2 min） 【教师】使用APP进行签到 【学生】按照老师要求签到 培养学生的组织纪律性，掌握学生的出勤情况 问题导入 （3 min） 【教师】提出问题 jQuery 可以实现哪些动画效果？ 【学生】思考、举手回答 【教师】通过学生的回答引入要讲的知识 使用 jQuery 可以很方便地制作出网页元素的动画效果，该动画效果包括元素的隐藏与显示、元素的淡入淡出和元素的滑动效果等。 通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣 传授新知 （20 min） 13.5 jQuery 的动画效果 【教师】讲解 jQuery 的动画效果，展示相应的表格，并演示例子辅助讲解 13.5.1 元素的隐藏和显示 元素的隐藏与显示是最基本的动画效果。jQuery 提供了两种控制元素隐藏和显示的方法，一种是分别隐藏和显示匹配元素；另一种是切换元素的可见状态。 1．分别隐藏和显示匹配元素 在 jQuery 中，使用 hide()方法隐藏匹配的元素，其语法格式为： …（详见教材） jQuery 中，使用 show()方法显示匹配的元素，其语法格式为： …（详见教材） 2．切换元素的可见状态 在 jQuery 中，使用 toggle()方法切换元素的可见状态，即如果元素是可见的，切换为隐藏；如果元素是隐藏的，切换为可见，其语法格式为： $(selector).toggle(speed,callback) 【例 13-4】 元素的隐藏和显示…（详见教材） 13.5.2 元素的淡入淡出 隐藏和显示元素时会改变元素的高度和宽度，若开发过程中不需要改变元素的高度和宽度，只需要单独改变元素的透明度时，就可以通过元素的淡入淡出效果实现。jQuery 提供了实现元素淡入淡出效果的方法，…（详见教材） 【教师】展示表“实现元素淡入淡出动画效果的方法”并讲解内容 speed 表示效果的时长，它的取值可以为"slow"、"fast"或毫秒；callback表示淡入/淡出完成后所执行的函数名称；…（详见教材） 13.5.3 元素的滑动效果 jQuery 提供了实现元素滑动效果的方法， 【教师】展示表“实现元素滑动效果的方法”并讲解内容 …（详见教材） 通过教师的讲解和演示例子，使学生掌握jQuery 动画效果的相关知识 实战拓展 （20 min） 【教师】要求学生完成以下项目，有疑问可互相讨论，或询问老师 题目：下拉菜单 要求：(1)熟悉初始文档结构。 (2)添加代码实现，鼠标单移入菜单项时其子菜单显示，移出时子菜单隐藏。 已给代码： 答案： 【学生】制作项目、讨论 通过制作项目，锻炼学生的编程能力 第二节课 实战演练 （25 min） 制作自动隐藏式菜单 【教师】展示此项目做成的最终效果，并找同学分析，该页面有哪些元素，利用到本章所学的哪些知识 在设计网页时，可以在页面中添加自动隐藏式菜单。这种菜单简洁易用，在不使用时可以自动隐藏，从而保持页面整洁。此页面有哪些元素，有哪些动画效果，应该怎么实现？ 【学生】观看效果、讨论、回答 【教师】要求学生先导入素材并添加页面的内容和页面的CSS样式，遇到不会的问题可以扫描微课二维码观看视频”制作“金企鹅教育”主页的轮播图”（详见教材），可讨论或咨询老师 步骤 1 在 HBuilder X 中导入本书配套素材“素材与案例\第 13 章\实战演练”文件夹，然后打开“13.5.html”文档。 步骤 2 添加页面内容。在<body>…</body>中添加以下代码设置隐藏菜单，…（详见

    您可能关注的文档

    文档评论（0）

    vip
    会计职称考试课件定制、高校课件教案及课标定制、高校毕业论文定制等 + 关注
    实名认证
    内容提供者

    该用户很懒，什么也没介绍

    咨询Ta
    认证主体胡**

    1亿VIP精品文档

    更多 >

    相关文档

    更多 >

    最近下载

    相关课程推荐