jQuery | Hide/Show, Toggle and Fading methods with Examples

jQuery provides a trivially simple interface for doing various kind of amazing effects. jQuery methods allow us to quickly apply commonly used effects with a minimum configuration.

jQuery hide() and show()

• jQuery hide() : Hides the Syntax or the element of html that you want to hide.

  $(selector).hide(speed, callback);

• jQuery show() : Shows the syntax or the element of html that you want the user to see.

  $(selector).show(speed, callback);

For both syntaxes above, The speed parameter is a optional parameter used for defining the speed of hiding and showing of the content of html. Durations can be specified either using one of the predefined string ‘slow’ or ‘fast’, or in a number of milliseconds, for greater precision; higher values indicate slower animations.
The callback parameter is optional parameter used after the hiding and the showing function is completed.

Example :
The hide() method simply sets the inline style display:?none for the selected elements. Conversely, the show() method restores the display properties of the matched set of elements to whatever they initially were—typically block, inline, or inline-block—before the inline style display:?none was applied to them.
Output :

Examples of Speed Parameter :
Example 1 :
Output :

Example 2:
Output :

jQuery toggle()

The jQuery toggle() method show or hide the elements in such a way that if the element is initially displayed, it will be hidden; if hidden, it will be displayed.

Syntax :

$(selector).toggle(speed, callback);

The speed and callback parameters are same optional parameters as of the previous one.
Example :
Output :

jQuery Fading Methods

With the help of jQuery you can fade HTML elements in or out as you want.
Following are the fade methods :

1. jQuery fadeIn() Method :
   Syntax :

   $(selector).fadeIn(speed, callback);

   The fadeIn() function is used to show a hidden element in HTML. The optional parameter speed is used for controlling the speed of hiding the element and the second optional parameter is used after the fading is completed.
   Example :
   Output :
2. jQuery fadeOut() Method :
   Syntax :

   $(selector).fadeOut(speed, callback);

   The fadeOut() function is used to fade out(hide) a element in HTML. The optional parameter speed is used for controlling the speed of viewing the element and the second optional parameter is used after the fading out is completed.
   Example :
   Output :
3. jQuery fadeToggle() Method :
   Syntax :

   $(selector).fadeToggle(speed, callback);

   The fadeToggle() function is used to toggle between fadeIn() and fadeOut
   Example :
   Output :
4. jQuery fadeTo() Method :
   Syntax :

   $(selector).fadeTo(speed, opacity, callback);

   The fadeTo() function allows fading of a element to a given opacity(range between 0 and 1) and this is a required field to fill in this function. The optional parameter speed is used for controlling the speed of hiding the element and the second optional parameter is used after the fading is completed.
   Example :
   Output :