Web前端技術(shù)主講人：XXX

XXX學(xué)院任務(wù)20使用jQuery實現(xiàn)答案顯示與隱藏效果【知識目標(biāo)】

掌握顯示與隱藏動畫效果相關(guān)方法的使用；

掌握滑動動畫效果相關(guān)方法的使用；

掌握淡入淡出動畫效果相關(guān)方法的使用。【技能目標(biāo)】

能夠根據(jù)需求對匹配的元素實現(xiàn)隱藏與顯示動畫效果；

能夠根據(jù)需求對匹配的元素實現(xiàn)上滑與下滑動畫效果；

能夠根據(jù)需求對匹配的元素實現(xiàn)淡入與淡出動畫效果?！舅刭|(zhì)目標(biāo)】

培養(yǎng)學(xué)生探究學(xué)習(xí)的能力；

培養(yǎng)學(xué)生嚴(yán)謹(jǐn)?shù)倪壿嬎季S能力；

培養(yǎng)學(xué)生團隊溝通協(xié)作的能力。教學(xué)目標(biāo)知識導(dǎo)圖顯示與隱藏動畫顯示與隱藏動畫在jQuery中，可以使用show()和hide()方法控制元素的顯示和隱藏，也可以使用toggle()方法來切換元素的顯示和隱藏。方法作用參數(shù)說明show(speed,easing,callback)顯示已隱藏的匹配元素speed:表示動畫速度，單位為毫秒，默認(rèn)值為0，該參數(shù)據(jù)還可以使用預(yù)定義的速度值slow、normal、fast。easing:表示切換效果，參數(shù)值有swing(默認(rèn))和linear。callback:表示回調(diào)函數(shù)，即動畫完成后執(zhí)行的函數(shù)。hide(speed,easing,callback)隱藏已顯示的匹配元素toggle(speed,easing,callback)對匹配的元素的顯示與隱藏效果進行切換顯示與隱藏動畫案例滑動動畫滑動動畫在jQuery中，可以使用slideDown()、slideUp()、slideToggle()等方法控制元素滑動效果。方法作用參數(shù)說明slideDown(speed,easing,callback)向下滑動顯示匹配的元素（1）speed:表示動畫速度，單位為毫秒，默認(rèn)值為0，該參數(shù)據(jù)還可以使用預(yù)定義的速度值slow、normal、fast。（2）easing:表示切換效果，參數(shù)值有swing(默認(rèn))和linear。（3）callback:表示回調(diào)函數(shù)，即動畫完成后執(zhí)行的函數(shù)。slideUp(speed,easing,callback)向上滑動顯示匹配的元素slideToggle(speed,easing,callback)在上滑和下滑兩種效果之間進行切換滑動動畫案例指針滑入前效果指針滑入前效果淡入淡出動畫淡入淡出動畫在jQuery中，可以使用fadeIn()、fadeOut()、fadeTo()、fadeToggle()等方法控制元素淡入淡出效果。方法作用參數(shù)說明fadeIn(speed,easing,callback)淡入顯示匹配的元素speed:可選，表示動畫速度，單位為毫秒，默認(rèn)值為0，該參數(shù)據(jù)還可以使用預(yù)定義的速度值slow、normal、fast。easing:可選，表示切換效果，參數(shù)值有swing(默認(rèn))和linear。callback:可選，表示回調(diào)函數(shù)，即動畫完成后執(zhí)行的函數(shù)。fadeOut(speed,easing,callback)淡出顯示匹配的元素fadeToggle(speed,easing,callback)在淡入和淡出兩種效果之間進行切換fadeTo(speed,opacity,easing,callback)以淡入淡出方式將匹配元素過渡到指定的透明度Speed、easing、callback三個參數(shù)與上述一致。Opacity：必選，表示透明度數(shù)值，范圍在0~1之間，0表示完成透明，1表示完成不透明。淡入淡出案例指針移入圖片前的效果指針移入圖片后的效果jQuery方法on()jQuery方法on()on()方法是jQuery官方推薦的綁定事件的一個方法，它能夠為當(dāng)前所選元素、子元素或動態(tài)創(chuàng)建的元素添加一個或多個事件處理程序。如果需要刪除事件處理程序，可以使用jQuery提供的off()方法。on()方法的語法格式如下。$(selector).on(event,childSelector,data,function)參數(shù)據(jù)說明如下。（1）even：必選，指定事件名稱，支持多個事件，多個事件用空格分隔，也可以是map參數(shù)和數(shù)組。（2）childSelector：可選，添加事件程序的子元素（注：不是父選