1. 程式人生 > 其它 >JQuery基礎—動畫效果及現象表示

JQuery基礎—動畫效果及現象表示

5 .動畫效果

a.基本動畫(hide show 隱藏顯示; fadeOut fadeln 淡出淡入; slideUp slideDown 滑入滑出)

b.自定義動畫

$(this).animate({left:"400px",height:"200px",opacity:l},3000)

.animate({top:"800px"width:"200px"},3000)

.fade0ut("5000")

(top left 等引數寫差值)

6.現象(event:自身事件)

a.冒泡行為 event.stopPropagation();(冒泡行為:多標籤重合,觸發內層標籤事件時,會同時觸發外層不同標籤的相同事件 return false

也可阻止冒泡行為)

b.預設行為event.preventDefault();(預設行為:表單提交時,如發生錯誤 則報錯終止前 仍會執行提交行為 return false也可阻止預設提交行為)

  1. CSS未排隊和排隊

未排隊 即寫在方法後 會將css與方法同時執行 在方法觸發同時改變樣式

排隊 則在動畫方法後加入回撥函式 即可保證樣式在方法執行後再觸發

d.自定義單個動畫和多重動畫連續滑動問題stop

1.

a.Stop().b a元素執行b動畫事件時,如果觸發狀態結束 則結束動畫效果(終結動畫運動剩餘時間) 只可影響一個動畫事件

2.

a.Stop(true/false).b b

動畫事件中如果有多動畫執行 可通過true/false 引數選定是否終結所有動畫

3.

a.Stop(true/falsetrue/false).b b動畫事件中如果有多動畫執行 可通過第一個true/false引數 選定是否終結所有動畫(用於終結當前動畫後的其他排隊動畫) 而第二個true/false 則用於判斷是否完成當前執行中的動畫(若執行 則直接完成當前動畫)