显示和隐藏

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         });