顯示和隱藏

1. show(speed) ：speed 可以取：slow/fast/毫秒

1 $("#show").click(function(){ 2 $("p").show(1000); 3 });

2. hide(speed) ：

1 $("#hide").click(function(){ 2 $("p").hide(); 3 });

3. toggle() ：切換 show() 和 hide() 方法

1 $("button").click(function(){ 2 $("p").toggle(); 3 });

淡入淡出

1. fadeIn(speed) ：淡入已隱藏的元素

1 $("button").click(function(){ 2 $("div").fadeIn(); 3 });

2. fadeOut(speed) ：淡出可見元素

1 $("button").click(function(){ 2 $("div").fadeOut(); 3 });

3. fadeToggle(speed) ：在前兩個(gè)方法之間切換

1 $("button").click(function(){ 2 $("div").fadeToggle(); 3 });

4. fadeTo(speed, opacity) ：允許漸變?yōu)榻o定的不透明度（0-1）

1 $("button").click(function(){ 2 $("div").fadeTo("slow",.3); 3 });

滑動

1. slideDown() ：向下滑動元素

1 $("div1").click(function(){ 2 $("div2").slideDown(); 3 });

2. slideUp() ：向上滑動元素

1 $("div1").click(function(){ 2 $("div2").slideUp(); 3 });

3. slideToggle() ：在前兩個(gè)方法之間切換

1 $("div1").click(function(){ 2 $("div2").slideToggle(); 3 });

動畫

animate() ：

1. 操作單個(gè)屬性

1 $("button").click(function(){ 2 $("div").animate({left:'300px'}); 3 });

2. 操作多個(gè)屬性

1 $("button").click(function(){ 2 $("div").animate({ 3 left:'300px', 4 width:'300px', 5 height:'300px', 6 opacity:'.3' 7 }); 8 });

3. 使用相對值

1 $("button").click(function(){ 2 $("div").animate({ 3 left:'300px', 4 width:' =300px', 5 height:' =300px', 6 opacity:'.3' 7 }); 8 });

4. 使用預(yù)定義值：動畫的值可以設(shè)置為：show/hide/toggle

1 $("button").click(function(){ 2 $("div").animate({ 3 height:'toggle' 4 }); 5 });

5. 隊(duì)列功能

1 $("button").click(function(){ 2 var div = $("div"); 3 div.animate({width:'300px',opacity:'.3',"slow"}); 4 div.animate({height:'300px',opacity:'.6',"slow"}); 5 div.animate({width:'100px',opacity:'.3',"slow"}); 6 div.animate({height:'100px',opacity:'.8',"slow"}); 7 });

停止動畫

stop() ：

1 $("#stop").click(function(){ 2 $("#panel").stop(); 3 });

callback

效果完全實(shí)現(xiàn)以后回調(diào)函數(shù)，如果沒有回調(diào)函數(shù)，效果會在完成前彈出

1 $("button").click(function(){ 2 $("p").hide("slow",function(){ 3 alert("段落隱藏了")； 4 })； 5 });

?

更多專業(yè)前端知識，請上 【猿2048】www.mk2048.com

總結(jié)

以上是生活随笔為你收集整理的jQuery 效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。