jQuery有效果函數方法 描述 animate() 對被選元素應用“自定義”的動畫 clearQueue() 對被選元素移除所有排隊的函數(仍未運行的) delay() 對被選元素的所有排隊函數(仍未運行)設置延遲 dequeue() 運行被選元素的下一個排隊函數 fadeIn() 淡入被選元素至 ...
jQuery有效果函數
方法 描述
animate() 對被選元素應用“自定義”的動畫
clearQueue() 對被選元素移除所有排隊的函數(仍未運行的)
delay() 對被選元素的所有排隊函數(仍未運行)設置延遲
dequeue() 運行被選元素的下一個排隊函數
fadeIn() 淡入被選元素至完全不透明
fadeOut() 淡出被選元素至完全不透明
fadeTo() 把被選元素減弱至給定的不透明度
hide() 隱藏被選的元素
queue() 顯示被選元素的排隊函數
show() 顯示被選的元素
slideDown() 通過調整高度來滑動顯示被選元素
slideToggle() 對被選元素進行滑動隱藏和滑動顯示的切換
slideUp() 通過調整高度來滑動隱藏被選元素
stop() 停止在被選元素上運行動畫
toggle() 對被選元素進行隱藏和顯示的切換
animate()在jquery中作為一個方法,可用於創建動畫效果,jquery中的animate()方法讓那個頁面增加了很好的視覺效果
<
div
class
=
"wrap"
>
<
img
src
=
"images/s1.jpg"
alt
=
"photo"
/>
<
div
class
=
"cover"
>
<
h3
>儘快來房間愛離開風口浪尖</
h3
>
<
p
>發貨空間按恢復健康等哈就快遞費還看見愛會儘快恢復可驕傲的劃分空間的及刻錄機</
p
>
<
p
><
a
href
=
"#"
>風華絕代</
a
></
p
>
</
div
>
</
div
>
CSS
.wrap{
position
:
relative
;
float
:
left
;
width
:
200px
;
height
:
200px
;
margin
:
5px
;
background
:
#e8f5fe
;
overflow
:
hidden
;}
.wrap img{
position
:
absolute
;
top
:
0
;
left
:
0
}
.wrap h
3
{
line-height
:
30px
;
font-size
:
14px
;
color
:
#fff
}
.wrap p{
line-height
:
20px
}
.cover{
position
:
absolute
;
background
:
#000
;
height
:
120px
;
width
:
100%
;
padding
:
3px
;
top
:
170px
; }
jQuery
$(
function
(){
$(
".cover"
).css(
"opacity"
,.8);
$(
".wrap"
).hover(
function
(){
$(
".cover"
,
this
).stop().animate({top:
"80px"
},{queue:
false
,duration:160});
},
function
(){
$(
".cover"
,
this
).stop().animate({top:
"170px"
},{queue:
false
,duration:160});
});
});
切換 <p> 元素的顯示與隱藏狀態:
$(".btn1").click(function(){$("p").hide();
});
定義和用法
toggle() 方法切換元素的可見狀態。
如果被選元素可見,則隱藏這些元素,如果被選元素隱藏,則顯示這些元素。
語法
$(selector).toggle(speed,callback,switch)