顯示和隱藏

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) ：在前兩個方法之間切換

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

4. fadeTo(speed, opacity) ：允許漸變為給定的不透明度（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() ：在前兩個方法之間切換

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

動畫

animate() ：

1. 操作單個屬性

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

2. 操作多個屬性

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. 使用預定義值：動畫的值可以設置為：show/hide/toggle

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

5. 隊列功能

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

效果完全實現以後回調函數，如果沒有回調函數，效果會在完成前彈出

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

jQuery 效果