| 有關基本事件Event | 說明 |
|---|---|
| hover(滑入時執行的Fn, 滑出時執行的Fn) | 滑鼠滑入滑出事件 [參考][參考] |
| click(滑鼠點選時執行的Fn) | 滑鼠按一下事件 [參考][參考] |
| 有關基本動畫效果Effect | 說明 |
|---|---|
| show([duration][,....]) | 顯示 [參考][參考] |
| hide([duration][,....]) | 隱藏 [參考][參考] |
| toggle([duration][,....]) | 按第一下執行function1, 按第二下執行function2 [參考][參考] |
| slideDown([duration][, ....]) | 向下展開 [參考][參考] |
| slideUp([duration][, ....]) | 向上收合 [參考][參考] |
| slideToggle([duration][, ....]) | 按第一下向下展開, 按第二下向上收合 [參考][參考] |
| fadeIn([duration][,....]) | 淡入 [參考][參考] |
| fadeOut([duration][,....]) | 淡出 [參考][參考] |
| fadeTo(duration,opacity [,....]) | 淡化到指定數值 [參考][參考] |
| fadeToggle([duration][,....]) | 按第一下淡入, 按第二下淡出[參考][參考] |
運用hover滑鼠滑入滑出事件滑入藍色標題文字範圍 (自左至右範例A、B、C、D)
(A) 以預設400毫秒的時間滑入show顯示標題之下的內容, 滑出hide隱藏內容
(B) 以1000毫秒的時間滑入show顯示標題之下的內容, 滑出hide隱藏內容
(C) 以預設400毫秒的時間滑入slideDown向下展開內容, 滑出slideUp向上收合內容
(D) 以1000毫秒的時間滑入fadeIn淡入顯示內容, 滑出fadeOut淡出隱藏內容
| HTML： | |
| CSS： | |
| JS： | |
運用click滑鼠按一下事件點選藍色標題文字 (自左至右範例A、B、C、D)
(A) 以1000毫秒的時間, 以toggle的方式按一下顯示內容, 再按一下則隱藏內容
(B) 以1000毫秒的時間, 以slideToggle的方式按一下向下展開內容, 再按一下則向上收合內容
(C) 以1000毫秒的時間, 以fadeToggle的方式按一下淡入顯示內容, 再按一下則淡出隱藏內容
(D) 以1000毫秒的時間, 以fadeTo的方式按一下標題將內容淡入顯示到40%的不透明度
| JS： |  |