1.jQuery hide hide() and show show():
With jQuery, you can hide and show HTML elements using the hide() and show() methods:
Example:
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
grammar:
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
The optional speed parameter specifies the speed to hide/show and can take the following values: "slow", "fast" or milliseconds.
The optional callback parameter is the name of the function to execute when the hide or show is done.
The following example demonstrates the hide() method with the speed parameter:
Example
$("button").click(function(){
$("p").hide(1000);
});
2.jQuery hide/show toggle()
With jQuery, you can use the toggle() method to toggle the hide() and show() methods.
Show hidden elements, and hide shown elements:
Example
$("button").click(function(){
$("p").toggle();
});
grammar: $(selector).toggle(speed,callback); The optional speed parameter specifies the speed to hide/show and can take the following values: "slow", "fast" or milliseconds. The optional callback parameter is the name of the function to execute when the hide or show is done.
3.jQuery fade in fadeIn() method
jQuery fadeIn() is used to fade in hidden elements.
grammar:
$(selector).fadeIn(speed,callback);
The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast" or milliseconds. .
The optional callback parameter is the name of the function to execute after fading is complete.
The following example demonstrates the fadeIn() method with different parameters:
Example
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
4.jQuery fade out fadeOut() method
The jQuery fadeOut() method is used to fade out visible elements.
grammar:
$(selector).fadeOut(speed,callback);
The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast" or milliseconds.
The optional callback parameter is the name of the function to execute after fading is complete.
The following example demonstrates the fadeOut() method with different parameters:
Example
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
5.jQuery fade in/out adeToggle() method
The jQuery fadeToggle() method toggles between the fadeIn() and fadeOut() methods.
fadeToggle() adds a fade-in effect to the element if the element has faded out.
If the element has faded in, fadeToggle() adds a fade out effect to the element.
grammar:
$(selector).fadeToggle(speed,callback);
The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast" or milliseconds.
The optional callback parameter is the name of the function to execute after fading is complete.
The following example demonstrates the fadeToggle() method with different parameters:
Example
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
6. jQuery gradient fadeTo() method
The jQuery fadeTo() method allows to fade to a given opacity (value between 0 and 1).
grammar:
$(selector).fadeTo(speed,opacity,callback);
The required speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast" or milliseconds.
The required opacity parameter in the fadeTo() method sets the fade effect to the given opacity (value between 0 and 1).
The optional callback parameter is the name of the function to execute when the function completes.
The following example demonstrates the fadeTo() method with different parameters:
Example
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});