jquery入門[1]-建構函式
jquery入門[2]-選擇器
jquery入門[3]-事件
jquery入門[4]-鏈式**
jquery入門[5]-ajax
jquery入門[6]-動畫
jquery直接各種動畫,常見的被封裝成各種方法,如show()/hide()/slidedown()/fadein()等等,參見:
effects
最靈活的則屬於animate( params, [duration], [easing], [callback] )方法,參見:
animate
其中params為動畫的執行結果,可以為各種樣式屬性,jquery將在duration指定的時間內,將物件的當前狀態漸變為params引數指定的值。如: $(
"#go
").click(
function
(),
1500
);});
params也可以是一些相對資料: $(
"#right
").click(
function
(),
"slow");
});$(
"#left
").click(
function
(),
"slow");
});
通過stop()函式可將物件再在執行的動畫暫停。選擇符:animated可以判斷物件是否處在動畫執行狀態。
以下為來自官網的乙個例子:
doctype html public "-//w3c//dtd html 4.01 transitional//en"
"">
<
html
>
<
head
>
<
script
src=""
>
script
>
<
script
>
$(document).ready(
function
());
function
runit() ,
2000
);$(
"div
").slidetoggle(
1000
);$(
"div
").slidetoggle(
"fast");
$("div"
).animate(,
1500
);$(
"div
").hide(
"slow");
$("div"
).show(
1200
);$(
"div
").slideup(
"normal
", runit);
}runit();
});script
>
<
style
>
div
div.newcolor
span
style
>
head
>
<
body
>
<
button
id="show"
>
show length of queue
button
>
<
span
>
span
>
<
div>
div>
body
>
html
>
效果為不斷變化的乙個方塊,因為最後乙個動畫
$("div"
).slideup(
"normal
", runit)執行後又 呼叫runit方法,所以動畫不斷迴圈。
jQuery入門 6 動畫
jquery入門 6 動畫 jquery入門 1 建構函式 jquery入門 2 選擇器 jquery入門 3 事件 jquery入門 4 鏈式 jquery入門 5 ajax jquery入門 6 動畫 jquery直接各種動畫,常見的被封裝成各種方法,如show hide slidedown f...
jQuery入門 6 動畫
jquery入門 1 建構函式 jquery入門 2 選擇器 jquery入門 3 事件 jquery入門 4 鏈式 jquery入門 5 ajax jquery入門 6 動畫 jquery直接各種動畫,常見的被封裝成各種方法,如show hide slidedown fadein 等等,參見 ef...
jQuery入門 6 動畫
jquery入門 1 建構函式 jquery入門 2 選擇器 jquery入門 3 事件 jquery入門 4 鏈式 jquery入門 5 ajax jquery入門 6 動畫 jquery直接各種動畫,常見的被封裝成各種方法,如show hide slidedown fadein 等等,參見 ef...