04 jQuery擴充套件

2022-06-13 12:42:15 字數 1673 閱讀 5729

原理:我們只需要以固定的時間間隔(例如,0.1秒),每次dom元素的css樣式修改一點(例如,高寬各增加10%),看起來就像動畫了

// 裡面寫最終效果(dom元素的css樣式);time表示時間,毫秒為單位,1秒 = 1000毫秒。如:

$('#dd').animate( , 3000 );              //

3秒內,寬高都變成100px,透明度為50%

function

dh() , 1000)

.delay(1000) //

動畫暫停1秒鐘

.animation( , 1000);

}

$('div').stop();     //

停止當前div正在執行的動畫

show/hide()

//

直接以 無參形式呼叫show() 和 hide(),會顯示和隱藏dom元素,但是只要傳遞乙個時間引數進去,竟會變成了動畫

$('#dd').show(3000); //

該div 三秒內逐漸顯示

$('#dd').hide(3000); //

該div 三秒內逐漸隱藏

toggle()

//

如果動畫為show,執行toggle變成hide;如果動畫為hide,執行toggle變成show

$('#dd').toggle(3000); //

該div 三秒內逐漸 隱藏/顯示

fadein/fadeout()

$('#dd').fadein(3000);      //

該div 三秒內逐漸 淡入(出現)

$('#dd').fadeout(3000); //

該div 三秒內逐漸 淡出(隱藏)

fadetoggle()

//

如果動畫為fadein,執行fadetoggle變成fadeout;如果動畫為fadeout,執行fadetoggle變成fadein

$('#dd').fadetoggle(3000); //

該div 三秒內逐漸 淡入/淡出

slideup/slidedown()//在垂直方向逐漸展開或收縮

$('#dd').slideup(3000);      //

該div 三秒內逐漸 往上收縮(隱藏)

$('#dd').slidedown(3000); //

該div 三秒內逐漸 往下展開(顯示)

slidetoggle()

//

如果動畫為slideup,執行slidetoggle變成slidedown;如果動畫為slidedown,執行slidetoggle變成slideup

$('#dd').slidetoggle(3000); //

該div 三秒內逐漸 上捲/下拉

settimeout

setinterval

04jQuery原始碼解析

lang en charset utf 8 documenttitle function window window 傳參window 1查詢速度變快 2在壓縮的時候很有用 undefined在ie789的瀏覽器下是可以被修改的.為了防止外部修改undefined的值,所以傳了undefined u...

04 jQuery的屬性操作

jquery的屬性操作模組分為四個部分 html屬性操作,dom屬性操作,類樣式操作和值操作 設定屬性值或者 返回被選元素的屬性值 獲取值 attr 設定乙個屬性值的時候 只是獲取值 var id div attr id console.log id var cla div attr class c...

04 jQuery的屬性操作

jquery的屬性操作模組分為四個部分 html屬性操作,dom屬性操作,類樣式操作和值操作 設定屬性值或者 返回被選元素的屬性值 獲取值 attr 設定乙個屬性值的時候 只是獲取值 var id div attr id console.log id var cla div attr class c...