計算機應用技術第11章 jQuery制作動畫

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

toggle()

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

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

if(page==page_count){//已經到最后一個版面了,如果再向后，必須跳轉到第一個版面。

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

//通過改變left值，跳轉到第一個版面

page=1;}else{

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

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

if(page==1){//已經到第一個版面了,如果再向前，必須跳轉到最后一個版面。

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

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