《Web前端技術（HTML5+CSS3+jQuery）》課件-第10章 jQuery動畫

第10章jQuery動畫學習目標123掌握控制元素顯示和隱藏的方法掌握控制元素淡入淡出效果的方法掌握調(diào)節(jié)元素透明度的方法4掌握控制元素滑動效果的方法本章架構★★★10.1應用jQuery實現(xiàn)常用動畫10.2應用jQuery實現(xiàn)自定義動畫10.3

綜合案例10.1應用jQuery實現(xiàn)常用動畫10.1應用jQuery實現(xiàn)常用動畫（1）顯示元素show()方法的功能是以動畫效果顯示指定的HTML元素。如果選擇的元素是可見的，這個方法將不會有任何效果。但是，無論這個元素是通過hide()方法隱藏的還是在CSS里設置了display:none樣式，這個方法都將有效。

語法：

.show([duration][,easing][,complete])1隱藏和顯示10.1應用jQuery實現(xiàn)常用動畫參數(shù)說明：●duration：可選參數(shù)。指定動畫效果運行的時間長度，單位為ms，默認值為nomal（400ms）?？蛇x值包括"slow"和"fast"，也可以直接寫表示動畫時長的毫秒數(shù)值。●easing：可選參數(shù)。指定設置不同動畫點中動畫速度的easing函數(shù)（也稱為動畫緩沖函數(shù)或緩動函數(shù)），內(nèi)置的擦除函數(shù)包括swing（搖擺緩沖）和linear（線性緩沖）。swing表示在開頭/結尾移動慢，在中間移動快。"linear"表示勻速移動?！馽omplete：可選參數(shù)。指定動畫效果執(zhí)行完后調(diào)用的函數(shù)。

1隱藏和顯示10.1應用jQuery實現(xiàn)常用動畫（2）隱藏元素hide()方法的功能是隱藏指定的HTML元素。但是，如果選擇的元素是隱藏的，這個方法將不會有任何效果。

語法：

.hide([duration][,easing][,complete])

參數(shù)說明：

與show()方法完全相同。1隱藏和顯示10.1應用jQuery實現(xiàn)常用動畫（1）淡入效果

fadeIn()方法可以實現(xiàn)元素的淡入效果。

語法：

$(selector).fadeIn([speed][,easing][,complete])2

淡入和淡出效果10.1應用jQuery實現(xiàn)常用動畫參數(shù)說明：

●speed:可選。規(guī)定元素從隱藏到可見的速度。默認為"normal"?？蛇x的值有"slow"、"fast"或者表示毫秒的數(shù)值。在設置速度的情況下，元素從隱藏到可見的過程中，會逐漸地改變其透明度，這樣會創(chuàng)造淡入效果?！馿asing:可選。規(guī)定了在動畫的不同點上元素的速度。默認值為"swing"。這個參數(shù)可選的值為"swing"和"linear"，"swing"是在開頭/結尾移動慢，在中間移動快；"linear"是勻速移動?！馽omplete:可選。它表示fadeIn函數(shù)執(zhí)行完之后，要執(zhí)行的函數(shù)。除非設置了speed參數(shù)，否則不能設置該參數(shù)。2

淡入和淡出效果10.1應用jQuery實現(xiàn)常用動畫（2）淡出效果fadeOut()方法的功能是逐漸改變被選元素的不透明度，從可見到隱藏，達到褪色效果。

語法：

$(selector).fadeOut([Speed][,easing][,complete])fadeOut的參數(shù)使用同fadeIn一樣。通常，該方法通常與

fadeIn()

方法一起使用。

2淡入和淡出效果10.1應用jQuery實現(xiàn)常用動畫（3）切換元素的淡入淡出效果fadeToggle()方法可以在fadeIn()與fadeOut()方法之間進行切換。如果元素已淡出，則fadeToggle()會向元素添加淡入效果。如果元素已淡入，則fadeToggle()會向元素添加淡出效果。

語法：

$(selector).fadeToggle([Speed][,easing][,complete])2淡入和淡出效果10.1應用jQuery實現(xiàn)常用動畫（1）滑動方式顯示jQuery滑動方法可使元素上下滑動，實現(xiàn)顯示和隱藏的效果。slideDown()方法以滑動方式顯示被選元素。它適用于通過jQuery方法隱藏的元素，或在CSS中聲明display:none隱藏的元素，不適用于通過visibility:hidden隱藏的元素。語法：

slideDown([speed][,easing][,complete])3動畫效果滑動10.1應用jQuery實現(xiàn)常用動畫參數(shù)說明：

●speed：可選。它規(guī)定元素從隱藏到可見的速度。默認為"normal"?？蛇x的值有"slow"、"fast"或者表示毫秒的數(shù)值?！馿asing：可選。它規(guī)定了在動畫的不同點上元素的速度。默認值為"swing"。這個參數(shù)可選的值為"swing"和"linear"，"swing"是在開頭/結尾移動慢，在中間移動快；"linear"是勻速移動?！馽omplete：可選。它表示slideDown函數(shù)執(zhí)行完之后，要執(zhí)行的函數(shù)。除非設置了speed參數(shù)，否則不能設置該參數(shù)。3動畫效果滑動10.1應用jQuery實現(xiàn)常用動畫（2）

滑動隱藏slideUp()方法用于隱藏所有匹配的元素，并帶有向上滑動的過渡動畫效果。即元素可見區(qū)域的高度從原有高度逐漸減小到0。如果元素本身是隱藏的，則不對其作任何改變。如果元素是可見的，則將其隱藏。與slideUp()方法相對的是slideDown()方法。

語法：

slideUp([speed][,easing][,complete])

參數(shù)說明：slideUp()方法有三個參數(shù)，其設置和功能與slideDown()方法相同。3動畫效果滑動10.1應用jQuery實現(xiàn)常用動畫（3）切換滑動顯示和滑動隱藏slideToggle()方法可以在slideDown()與slideUp()方法之間進行切換。

如果元素是顯示的，則slideToggle()可向上滑動隱藏它們。

如果元素是隱藏的，則slideToggle()可向下滑動顯示它們。3動畫效果滑動10.2應用jQuery實現(xiàn)自定義動畫10.2應用jQuery實現(xiàn)自定義動畫

調(diào)用animate()方法可以根據(jù)一組CSS屬性實現(xiàn)自定義的動畫效果。語法如下：$(selector).animate(properties[,duration][,easing][,complete])參數(shù)說明：●properties：產(chǎn)生動畫效果的CSS屬性和值。●duration：指定動畫效果運行的時間長度，單位為ms，默認值為nomal（400ms）?？蛇x值包括“slow”和“fast”。●easing：指定設置不同動畫點中動畫速度的easing函數(shù)，內(nèi)置的擦除函數(shù)包括swing（搖擺緩沖）和linear（線性緩沖）。jQuery的擴展插件中可以提供更多的easing函數(shù)?！馽omplete：指定動畫效果執(zhí)行完后調(diào)用的函數(shù)。1創(chuàng)建自定義動畫10.2應用jQuery實現(xiàn)自定義動畫stop()方法用于在動畫或效果完成前對它們進行停止。stop()方法適用于所有jQuery效果函數(shù)，包括滑動、淡入淡出和自定義動畫。默認情況下，stop()會清除在被選元素上指定的當前動畫。

語法：

$(selector).stop(stopAll,goToEnd);

參數(shù)說明：●stopAll：可選。規(guī)定是否應該清除動畫隊列。默認是false，即僅停止活動的動畫，允許任何排入隊列的動畫向后執(zhí)行?！駁oToEnd：可選。參數(shù)規(guī)定是否立即完成當前動畫。默認是false。2停止動畫10.3

綜合案例10.3

綜合案例“網(wǎng)購商城”綜合案例

（1）鼠標懸停水平導航欄的某個菜單項，該菜單項出現(xiàn)下拉菜單；

（2）鼠標單擊縱向導航欄，導航欄一級目錄