計(jì)算機(jī)應(yīng)用技術(shù)第11章 jQuery制作動(dòng)畫

第10章jQuery制作動(dòng)畫掌握顯示與隱藏的相關(guān)動(dòng)畫方法掌握animate方法、理解動(dòng)畫隊(duì)列能解決動(dòng)畫效果與用戶操作不一致問(wèn)題學(xué)習(xí)目標(biāo)010304理解圖片輪播原理02本章任務(wù)任務(wù)1：FAQ答案的顯示和隱藏任務(wù)2：圖片橫向移動(dòng)效果任務(wù)1FAQ答案的顯示和隱藏任務(wù)描述頁(yè)面加載時(shí)問(wèn)題答案隱藏，當(dāng)用戶問(wèn)題時(shí)，每個(gè)問(wèn)題的答案以不同的動(dòng)畫方法顯示和隱藏答案，分別是顯示隱藏、淡入/淡出和上下滑動(dòng)，當(dāng)用戶再次單擊問(wèn)題時(shí)，答案隱藏。演示任務(wù)1：FAQ答案的顯示和隱藏任務(wù)分析1.為每一個(gè)“問(wèn)題”綁定鼠標(biāo)單擊事件。2.獲取每一個(gè)“問(wèn)題”相對(duì)應(yīng)的“答案”。3.為每一個(gè)“答案”添加顯示與隱藏的不同動(dòng)畫。單擊第1個(gè)問(wèn)題，其答案顯示和隱藏的動(dòng)畫是高度、寬度和透明度的同時(shí)變化；單擊第2個(gè)問(wèn)題，其答案顯示和隱藏的動(dòng)畫是淡入淡出，即只有透明度的變化；單擊第3個(gè)問(wèn)題，其答案顯示和隱藏的動(dòng)畫是上下滑動(dòng)效果，即只有高度的變化。掌握jQuery中的顯示隱藏動(dòng)畫方法相關(guān)動(dòng)畫方法控制顯示和隱藏顯示：show() 隱藏：hide()

toggle()

控制不透明度淡入：fadeIn()淡出：fadeout()透明至：fadeTo()fadeToggle()控制高度上滑：slideUp()下滑：slideDown()slideUpToggle()“fast”:200“normal”:400slow”:600FAQ答案的顯示和隱藏show()方法的語(yǔ)法結(jié)構(gòu)：$(selector).show(speed,callback);參數(shù)描述speed可選。規(guī)定元素從隱藏到完全可見(jiàn)的速度。默認(rèn)為"0"?？扇〉闹担汉撩耄ū热?500）"slow"（為600毫秒）"normal"（為400毫秒）"fast"（為200毫秒）在設(shè)置速度的情況下，元素從隱藏到完全可見(jiàn)的過(guò)程中，會(huì)逐漸地改變其高度、寬度、外邊距、內(nèi)邊距和透明度。如果沒(méi)有設(shè)置速度，元素會(huì)直接顯示。callback可選。show()方法執(zhí)行完之后，要執(zhí)行的方法。除非設(shè)置了speed參數(shù)，否則不能設(shè)置該參數(shù)。任務(wù)實(shí)現(xiàn)關(guān)鍵代碼$("dldt:first").click(function(){var$dt=$(this).next();if($dt.is(":visible")){$dt.hide("slow");}else{$dt.show(300);}})$("dldt:first").click(function(){var$dt=$(this).next();if($dt.is(":visible")){$dt.fadeOut("slow");}else{$dt.fadeIn("fast");}})$("dldt:first").click(function(){var$dt=$(this).next();if($dt.is(":visible")){$dt.slideUp("fast");}else{$dt.slideDown("normal");}})$(this).next().toggle('slow');$(this).next().fadeToggle('slow')$(this).next().slideToggle('slow')練一練根據(jù)所給素材，實(shí)現(xiàn)Tab切換效果。用戶移入選項(xiàng)卡時(shí)，當(dāng)前選項(xiàng)卡添加樣式，如圖所示，其他選項(xiàng)卡不添加該樣式，同時(shí)該選項(xiàng)卡的內(nèi)容淡入顯示。練習(xí)練一練（1）.設(shè)置選項(xiàng)卡樣式，為4個(gè)選項(xiàng)卡依次設(shè)置.jQuery、.Vue、.Reat和.Node樣式，第1個(gè)選項(xiàng)卡顯示，其他三個(gè)選項(xiàng)卡隱藏。（2）.選項(xiàng)卡應(yīng)用buttons樣式，當(dāng)前顯示的選項(xiàng)卡應(yīng)用buttonHover。頁(yè)面加載時(shí)第1個(gè)選項(xiàng)卡應(yīng)用buttonHover樣式。（3）.定義選項(xiàng)卡切換函數(shù)，可以定義兩個(gè)參數(shù)，其中一個(gè)參數(shù)是容器，一個(gè)參數(shù)是要顯示文字的選項(xiàng)卡，函數(shù)調(diào)用時(shí)傳遞相應(yīng)參數(shù)。（4）.函數(shù)調(diào)用。實(shí)現(xiàn)思路練一練根據(jù)所給素材，鼠標(biāo)移入菜單項(xiàng)，二級(jí)菜單以改變高度動(dòng)畫顯示出來(lái)，鼠標(biāo)移出菜單項(xiàng)時(shí)，二級(jí)菜單以改變高度動(dòng)畫隱藏。（1）可為菜單項(xiàng)綁定hover事件。（2）二級(jí)菜單動(dòng)畫使用sildeUp()和slideDown()實(shí)現(xiàn)。實(shí)現(xiàn)思路練習(xí)任務(wù)2制作圖片橫向移動(dòng)效果任務(wù)描述圖片橫向移動(dòng)效果，共4個(gè)版面。左右箭頭可控制圖片的左右滾動(dòng)。當(dāng)展示內(nèi)容已經(jīng)是最后一個(gè)版面時(shí)，如果再向后，就顯示第一個(gè)版面。當(dāng)展示內(nèi)容已經(jīng)是第一個(gè)版面時(shí)，如果再向前，就顯示最后一個(gè)版面。左上角箭頭旁邊的藍(lán)色圓點(diǎn)應(yīng)該與動(dòng)畫一起切換，它代表著當(dāng)前所處的版面。演示任務(wù)2：圖片橫向移動(dòng)效果任務(wù)分析1.通過(guò)jQuery選擇器獲取“左右箭頭”，為其綁定click事件。2.獲取要控制的“圖片內(nèi)容所在的div元素”（class屬性為“v_content_list”）和“圖片展示區(qū)域的div元素”（class屬性為“v_content”）的寬度。3.使用自定義動(dòng)畫控制“圖片內(nèi)容所在的div元素”的left屬性值來(lái)改變其水平位置，以一個(gè)版面的寬度為單位進(jìn)行變化。4.當(dāng)前版面對(duì)應(yīng)藍(lán)色圓點(diǎn)添加current樣式，其他圓點(diǎn)移除該樣式。1.理解圖片輪播原理2.掌握自定義動(dòng)畫animate方法的應(yīng)用圖片輪播原理大家知道生活中的電影是怎么播放的嗎？原理點(diǎn)撥類似生活中的電影播放所有圖片就是電影中的“膠卷“展示的圖片就是電影中的”畫面“圖片輪播原理自定義動(dòng)畫animate自定義動(dòng)畫語(yǔ)法animate(params,speed,fun);params為屬性值，speed為速度，fun為回調(diào)函數(shù)可操作大部分樣式屬性，但部分屬性除外，比如背景動(dòng)畫控制（1）簡(jiǎn)單動(dòng)畫單擊“開(kāi)始動(dòng)畫”,把<div>元素移至距左邊250像素的位置，即left等于250px。$("#btn1").click(function(){$(".divStyle").animate({left:'250px’},2000);});（2）累加、累減動(dòng)畫每單擊一次“累加動(dòng)畫”按鈕，把<div>元素移至距左邊100像素的位置。$(“#btn2”).click(function(){$(“.divStyle”).animate({left:”+=100px”},”fast”);})動(dòng)畫控制（3）同時(shí)執(zhí)行多個(gè)動(dòng)畫每單擊一次“執(zhí)行多個(gè)動(dòng)畫”，<div>元素往左移動(dòng)100px、高度增加50px。$("#btn3").click(function(){$(“.divStyle”).animate({left:”+=100px”,height:”+=50px”},”fast”);})（4）順序執(zhí)行多個(gè)動(dòng)畫每單擊一次“動(dòng)畫隊(duì)列”，<div>元素先往左移動(dòng)100px，后高度增加50px。$(“#btn4”).click(function(){$(“.divStyle”).animate({left:”+=100px”},”fast”).animate({height:”+=50px”},”fast”);動(dòng)畫順序執(zhí)行稱為“動(dòng)畫隊(duì)列”動(dòng)畫控制（5）動(dòng)畫回調(diào)函數(shù)動(dòng)畫執(zhí)行完畢后執(zhí)行的函數(shù)。單擊按鈕，將div寬度設(shè)置為150px后，為div添加邊框。$("button").click(function(){ $("div").animate({width:'150px'}，'slow'，function(){ $("div").css("border"，"5pxsolidorange"); });});思考在二級(jí)菜單顯示隱藏這個(gè)案例中，如果用戶操作過(guò)快，導(dǎo)致光標(biāo)效果與用戶操作不一致，怎么辦？stop方法停止前面動(dòng)畫停止動(dòng)畫語(yǔ)法：stop([clearQueue],[gotoEnd])（參數(shù)為可選，為布爾值）

0102第一個(gè)參數(shù)是否清空未執(zhí)行完的動(dòng)畫隊(duì)列第二個(gè)參數(shù)是否直接將正在執(zhí)行的那個(gè)動(dòng)畫跳轉(zhuǎn)到末狀態(tài)解決光標(biāo)效果與用戶操作不一致問(wèn)題$('.mainlevel').hover(function(){ $(this).find('ul').stop(true,true).slideDown(500); },function(){ $(this).find('ul').stop(true,true).slideUp("fast"); })判斷元素是否處于動(dòng)畫狀態(tài)if(!$(element).is(“:animated”)){//如果當(dāng)前沒(méi)有進(jìn)行動(dòng)畫，則添加新動(dòng)畫……}任務(wù)實(shí)現(xiàn)關(guān)鍵代碼if(!$v_show.is(":animated")&&$(this).hasClass("next")){//判斷“視頻內(nèi)容展示區(qū)域”是否正在處于動(dòng)畫

if(page==page_count){//已經(jīng)到最后一個(gè)版面了,如果再向后，必須跳轉(zhuǎn)到第一個(gè)版面。

$v_show.animate({left:'0px'},"slow");

//通過(guò)改變left值，跳轉(zhuǎn)到第一個(gè)版面

page=1;}else{

$v_show.animate({left:'-='+v_width},"slow");//通過(guò)改變left值，達(dá)到每次換一個(gè)版面

page++;}}if(!$v_show.is(":animated")&&$(this).hasClass("prev")){//判斷“視頻內(nèi)容展示區(qū)域”是否正在處于動(dòng)畫

if(page==1){//已經(jīng)到第一個(gè)版面了,如果再向前，必須跳轉(zhuǎn)到最后一個(gè)版面。

$v_show.animate({left:'-='+v_width*(page_count-1)},"slow"); page=page_count;}else{

$v_show.animate({left:'+='+v_width},"slow"); ;}練一練根據(jù)所給素材實(shí)現(xiàn)圖片橫向輪播效果，如圖所示。（1）獲取需要輪播的圖片和