jQuery網(wǎng)頁特效任務(wù)驅(qū)動(dòng)式教程（微課版）-教案 任務(wù)5-1 文本動(dòng)畫和顯隱動(dòng)畫

1、任務(wù)57文本動(dòng)畫和顯隱動(dòng)畫(2次課)課程內(nèi)容信息說明主題實(shí)現(xiàn)動(dòng)畫效果所屬任務(wù)任務(wù)5教學(xué)目標(biāo)知識(shí)目標(biāo)掌握使用css()制作動(dòng)畫的方法 掌握顯隱動(dòng)畫函數(shù)的用法能力目標(biāo)能夠熟練使用css()方法實(shí)現(xiàn)文本動(dòng)畫，使用顯隱動(dòng)畫模擬文 件夾的樹形列表結(jié)構(gòu)重點(diǎn)制作動(dòng)畫的各種函數(shù)的作用和用法：css()、顯隱動(dòng)畫難點(diǎn)使用顯隱動(dòng)畫模擬文件夾的樹形列表結(jié)構(gòu)教學(xué)方法與教學(xué)手段教學(xué)方法線上線下結(jié)合、工程驅(qū)動(dòng)、啟發(fā)引導(dǎo)、問題導(dǎo)向、案例演示教學(xué)手段信息化手段應(yīng)用，機(jī)房傳屏軟件應(yīng)用或騰訊會(huì)議應(yīng)用課中活動(dòng)及需要時(shí)間.使用css()方法實(shí)現(xiàn)文本卻 要求：頁面中有三個(gè)段落，內(nèi)彳 落背景改為黃色，文本改為紅1 擊段落時(shí)，段落字號(hào)放大

2、為原: (1)添加頁面元素，設(shè)計(jì)css( (2) jQuery 中 hover。方法的.使用顯隱動(dòng)畫模擬文件夾1 0匐%動(dòng)-X +C O 127.0.0.1:8848/jQuery(MWf . 。O任務(wù)1 jQuery旦礎(chǔ)知識(shí)任務(wù)2實(shí)現(xiàn)級(jí)聯(lián)菜單功能(1)設(shè)計(jì)元素結(jié)構(gòu)(2)使用腳本代碼實(shí)現(xiàn)功能j畫效果(35分鐘)孕任意，段落內(nèi)容使用默認(rèn)樣式效果，當(dāng)鼠標(biāo)指向段落時(shí)，將段 互，鼠標(biāo)離開段落時(shí)，將背景改為白色，文本改為藍(lán)色；鼠標(biāo)單 來的1.2倍)動(dòng)畫9用:的樹形列表結(jié)構(gòu)(55分鐘)0忸形動(dòng)畫X +-CO 127.0.0.1:8848/jQuery教材案例/任 O O任務(wù)1 jQuery基礎(chǔ)知識(shí) dom

3、.html 示的 1 -2 error.html WIl-3 ready.html任務(wù)2實(shí)現(xiàn)級(jí)聯(lián)菜單功能城市級(jí)聯(lián) imagesclose.png down.png cityjson 省市區(qū)級(jí)聯(lián).html 年月日級(jí)聯(lián).html.顯示隱藏動(dòng)畫函數(shù)（55分鐘）show。、hide（） toggle（）（2）例如講解：有動(dòng)畫效果的顯示與隱藏動(dòng)畫.應(yīng)用動(dòng)畫的回調(diào)函數(shù)（30分鐘）觀察給定代碼的運(yùn)行效果，思考問題，給出相應(yīng)的解決方案課堂小結(jié)（5分鐘）對(duì)學(xué)生課前預(yù)習(xí)效果、本次課的實(shí)施效果進(jìn)行點(diǎn)評(píng)，并提出新的要求課后活動(dòng)學(xué)生活動(dòng)（約30分鐘）教師活動(dòng)作業(yè)：使用循環(huán)結(jié)構(gòu)在頁面中添加5個(gè)div, div的樣式要求為寬度100像素，高度100像素，背景綠色，邊距2像素，行內(nèi)塊布局，內(nèi)容為 檢查作業(yè)，并將作業(yè)問題反應(yīng)給學(xué)生序號(hào)1、2、3、4、5,內(nèi)容在水平和垂直方向都居中;動(dòng)