jQuery Control Element Hide and Display

1. jQuery hiding and displaying effects

With jQuery, you can use the hide () and show () methods to hide and display HTML elements:

$("#hide").click(function(){
 $("p").hide();
}); // Click id="hide" Element, hide all <p> Label content; 

$("#show").click(function(){
 $("p").show();
}); // Click id="show" Element, all of the <p> Label content; 

2. jQuery fade-in and fade-out effect

With jQuery, you can realize the fade-in and fade-out effect of elements.

jQuery has the following four fade methods:

fadeIn() fadeOut() fadeToggle() fadeTo()

//jQuery fadeIn()  Used to fade in hidden elements; 
$(selector).fadeIn(speed,callback);
//speed( Optional ) Parameter specifies the duration of the effect. It can take the following values: "slow" , "fast"  Or milliseconds; 
//callback( Optional )  The parameter is  fading  The name of the function executed after completion; 
$("button").click(function(){
 $("#div1").fadeIn();
 $("#div2").fadeIn("slow");
 $("#div3").fadeIn(3000);
}); // Click <button> Button, fade in different effects id They are "div1,div2,div3" Elements of; 
//jQuery fadeOut()  Method is used to fade out visible elements; 
$(selector).fadeOut(speed,callback);
//speed( Optional ) Parameter specifies the duration of the effect. It can take the following values: "slow" , "fast"  Or milliseconds; 
//callback( Optional )  The parameter is  fading  The name of the function executed after completion; 
$("button").click(function(){
 $("#div1").fadeOut();
 $("#div2").fadeOut("slow");
 $("#div3").fadeOut(3000);
}); // Click <button> Button, fade out of different effects id They are "div1,div2,div3" Elements of; 
//jQuery fadeToggle()  Method can be found in the  fadeIn()  And  fadeOut()  Switch between methods; 
// If the element has faded out, the  fadeToggle()  Adds a fade-in effect to the element; 
// If the element has faded in, the  fadeToggle()  Adds a fade-out effect to the element; 
$(selector).fadeToggle(speed,callback);
//speed( Optional ) Parameter specifies the duration of the effect. It can take the following values: "slow" , "fast"  Or milliseconds; 
//callback( Optional )  The parameter is  fading  The name of the function executed after completion; 
$("button").click(function(){
 $("#div1").fadeToggle();
 $("#div2").fadeToggle("slow");
 $("#div3").fadeToggle(3000);
}); // Click <button> Button, fade out and fade in of different effects id They are "div1,div2,div3" Elements of; 
//jQuery fadeTo()  Method allows gradient to a given opacity with a value between  0  And  1  Between); 
$(selector).fadeTo(speed,opacity,callback);
//speed( Required ) Parameter specifies the duration of the effect. It can take the following values: "slow" , "fast"  Or milliseconds; 
//opacity( Required ) Parameter sets the fade-in and fade-out effect to the given opacity with a value between  0  And  1  Between); 
//callback( Optional )  The parameter is  fading  The name of the function executed after completion; 
$("button").click(function(){
 $("#div1").fadeTo("slow",0.15);
 $("#div2").fadeTo("slow",0.4);
 $("#div3").fadeTo("slow",0.7);
}); // Click <button> Button, fade in and out with the given opacity id They are "div1,div2,div3" Elements of; 

3. Sliding effect of jQuery

With jQuery, you can create sliding effects on elements.

jQuery has the following sliding methods:

slideDown() slideUp() slideToggle()

//jQuery slideDown()  Method is used to slide down elements; 
$(selector).slideDown(speed,callback);
//speed( Optional ) Parameter specifies the duration of the effect, which can take the following values: "slow" , "fast"  Or milliseconds; 
//callback( Optional ) The parameter is the name of the function executed after the slide is completed; 
$("#flip").click(function(){
 $("#panel").slideDown();
}); // Click id For flip When the element of the id For panel The element of slides down; 
//jQuery slideUp()  Method is used to slide elements up; 
$(selector).slideUp(speed,callback);
//speed( Optional ) Parameter specifies the duration of the effect, which can take the following values: "slow" , "fast"  Or milliseconds; 
//callback( Optional ) The parameter is the name of the function executed after the slide is completed; 
$("#flip").click(function(){
 $("#panel").slideUp();
}); // Click id For flip When the element of the id For panel The element of slides upward; 
//jQuery slideToggle()  Method can be found in the  slideDown()  And  slideUp()  Switch between methods; 
// If the element slides down, the  slideToggle()  They can be slid up; 
// If the element slides up, the  slideToggle()  They can be slid down; 
$(selector).slideToggle(speed,callback);
//speed( Optional ) Parameter specifies the duration of the effect, which can take the following values: "slow" , "fast"  Or milliseconds; 
//callback( Optional ) The parameter is the name of the function executed after the slide is completed; 
$("#flip").click(function(){
 $("#panel").slideToggle();
}); // Click id For flip When the element of the id For panel Elements of slide up or down;