TS jQuery @ ASCC

(1) jQuery基本事件Event

有關基本事件Event	說明
hover(滑入時執行的Fn, 滑出時執行的Fn)	滑鼠滑入滑出事件 [參考][參考]
click(滑鼠點選時執行的Fn)	滑鼠按一下事件 [參考][參考]

 

(2) jQuery基本動畫效果Effect

有關基本動畫效果Effect	說明
show([duration][,....])	顯示 [參考][參考]
hide([duration][,....])	隱藏 [參考][參考]
toggle([duration][,....])	按第一下執行function1, 按第二下執行function2 [參考][參考]
slideDown([duration][, ....])	向下展開 [參考][參考]
slideUp([duration][, ....])	向上收合 [參考][參考]
slideToggle([duration][, ....])	按第一下向下展開, 按第二下向上收合 [參考][參考]
fadeIn([duration][,....])	淡入 [參考][參考]
fadeOut([duration][,....])	淡出 [參考][參考]
fadeTo(duration,opacity [,....])	淡化到指定數值 [參考][參考]
fadeToggle([duration][,....])	按第一下淡入, 按第二下淡出[參考][參考]

 

(3) 運用hover滑鼠滑入滑出製作基本動畫效果

運用hover滑鼠滑入滑出事件滑入藍色標題文字範圍 (自左至右範例A、B、C、D)
(A) 以預設400毫秒的時間滑入show顯示標題之下的內容, 滑出hide隱藏內容
(B) 以1000毫秒的時間滑入show顯示標題之下的內容, 滑出hide隱藏內容
(C) 以預設400毫秒的時間滑入slideDown向下展開內容, 滑出slideUp向上收合內容
(D) 以1000毫秒的時間滑入fadeIn淡入顯示內容, 滑出fadeOut淡出隱藏內容

HTML：
CSS：
JS：

 

(4) 運用click滑鼠按一下製作基本動畫效果

運用click滑鼠按一下事件點選藍色標題文字 (自左至右範例A、B、C、D)
(A) 以1000毫秒的時間, 以toggle的方式按一下顯示內容, 再按一下則隱藏內容
(B) 以1000毫秒的時間, 以slideToggle的方式按一下向下展開內容, 再按一下則向上收合內容
(C) 以1000毫秒的時間, 以fadeToggle的方式按一下淡入顯示內容, 再按一下則淡出隱藏內容
(D) 以1000毫秒的時間, 以fadeTo的方式按一下標題將內容淡入顯示到40%的不透明度

JS：