#7 jQuery Effects | Display Effects | Fading Effects | Hide / Show / Toggle / Fade

jQuery helps us to add amazing effects on a web page.

jQuery effects are categorized into below effects :-

Display Effects - Hide, Show, Toggle
Fading Effects - fadeIn, fadeOut, fadeToggle, fadeTo
Sliding Effects - slideDown, slideUp, slideToggle
Other Effects - animate, delay

In this video, we are going to learn Display and Fading Effects like Hide / Show / Toggle / Fade

jQuery Hide and Show Effects
Hide and Show methods of jQuery are used to hide and show HTML Elements.

Check in video for example of Hide and Show Effects.

Toggle Effect
Toggle method is used whenever we want to toggle or switch between hidden and displayed html elements. In this way, shown elements are hidden and hidden elements are shown.

Check in video for example of Toggle Effect.

Fade Effect
With jQuery you can fade elements in and out of visibility.

jQuery has the following fade methods:
fadeIn :- used to fade in / show the hidden elements.
fadeOut :- used to fade out / hides the visible elements.
fadeToggle :- toggles between the fadeIn() and fadeOut() methods
fadeTo :- allows fading to a given opacity (value between 0 and 1)

Syntax of fadeIn Method :-
$(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 a function to be executed after the fading completes.

Check in video for example of fadeIn Method.

Syntax of fadeOut Method :-
$(selector).fadeOut(speed,callback);

Check in video for example of fadeOut Method.

Syntax of fadeToggle Method :-
$(selector).fadeToggle(speed,callback);

Check in video for example of fadeToggle Method.

Syntax of fadeTo Method :-
$(selector).fadeTo(speed,opacity,callback);

The required opacity parameter in the fadeTo() method specifies fading to a given opacity (value between 0 and 1).

Check in video for example of fadeTo Method.

In next video, we will work on Sliding and other effects.

Join this channel to get access to perks:
   / @stackdevelopers