show and hide
1. show(speed): speed can be taken: slow/fast/milliseconds
1 $("#show").click(function(){ 2 $("p").show(1000); 3 });
2. hide(speed) :
1 $("#hide").click(function(){ 2 $("p").hide(); 3 });
3. toggle() : toggle the show() and hide() methods
1 $("button").click(function(){ 2 $("p").toggle(); 3 });
fade in and fade out
1. fadeIn(speed) : fade in the hidden element
1 $("button").click(function(){ 2 $("div").fadeIn(); 3 });
2. fadeOut(speed) : fade out visible elements
1 $("button").click(function(){ 2 $("div").fadeOut(); 3 });
3. fadeToggle(speed) : toggle between the first two methods
1 $("button").click(function(){ 2 $("div").fadeToggle(); 3 });
4. fadeTo(speed, opacity) : Allows to fade to a given opacity (0-1)
1 $("button").click(function(){ 2 $("div").fadeTo("slow",.3); 3 });
slide
1. slideDown() : slide the element down
1 $("div1").click(function(){ 2 $("div2").slideDown(); 3 });
2. slideUp() : slide the element up
1 $("div1").click(function(){ 2 $("div2").slideUp(); 3 });
3. slideToggle() : toggle between the first two methods
1 $("div1").click(function(){ 2 $("div2").slideToggle(); 3 });
animation
animate() :
1. Manipulate a single property
1 $("button").click(function(){ 2 $("div").animate({left:'300px'}); 3 });
2. Manipulate multiple properties
1 $("button").click(function(){ 2 $("div").animate({ 3 left:'300px', 4 width:'300px', 5 height:'300px', 6 opacity:'.3' 7 }); 8 });
3. Use relative values
1 $("button").click(function(){ 2 $("div").animate({ 3 left:'300px', 4 width:'+=300px', 5 height:'+=300px', 6 opacity:'.3' 7 }); 8 });
4. Use predefined values: The value of animation can be set as: show/hide/toggle
1 $("button").click(function(){ 2 $("div").animate({ 3 height:'toggle' 4 }); 5 });
5. Queue function
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 animation
stop() :
1 $("#stop").click(function(){ 2 $("#panel").stop(); 3 });
callback
After the effect is fully realized, the callback function will be called. If there is no callback function, the effect will pop up before completion.
1 $("button").click(function(){ 2 $("p").hide("slow",function(){ 3 alert("段落隐藏了"); 4 }); 5 });