JQuery fade effect with example

jQuery provides easy ways to animate any element. One of the effect is fading effect. Fade effect workds as gradual increase and decrease in the opacity in the selected element. jQuery provides four method to create fade effects.

In this article, we will describe all methods one by one. So let's start from fadeIn() method.

jQuery fadeIn() method

jQuery fadeIn() method used to show hidden element in fade effect.

Syntax:

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

Parameters:

duration is string 'slow', 'fast' or milliseconds

callback is a optional function which executes after the fadeIn effect completes.

Example:

$('.normal').fadeIn();
$('#slow').fadeIn('slow');
$('div').fadeIn(1000, function() {
    alert('fadeIn effect completed.');
});

Here is demo example for fadeIn() effect.

jQuery fadeOut() method

jQuery fadeOut() method used to hide element in fade effect.

Syntax:

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

Parameters:

duration is string 'slow', 'fast' or milliseconds

callback is a optional function which executes after the fadeOut effect completes.

Example:

$('.normal').fadeOut();
$('div').fadeOut(1000);
$('#slow').fadeOut('slow', function() {
    alert('fadeOut effect completed.');
});

Here is live example for fadeOut() effect.

jQuery fadeToggle() method

jQuery fadeToggle() method used to toggle elements fadeIn() method and fadeOut() method. It shows hidden elements and hide elements in fade effect.

Syntax:

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

Parameters:

duration is string 'slow', 'fast' or milliseconds

callback is a optional function which executes after the fadeToggle effect completes.

Example:

$('.normal').fadeToggle();
$('div').fadeToggle(1000);
$('#slow').fadeToggle('slow', function() {
    alert('fadeToggle effect completed.');
});

Here is live example for fadeToggle() effect.

jQuery fadeTo() method

jQuery fadeTo() method used to set opacity of element in given value.

Syntax:

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

Parameters:

duration is string 'slow', 'fast' or milliseconds

opacity decimal between 0 and 1 where 0 will hide element and 1 will do nothing.

callback is a optional function which executes after the fadeTo effect completes.

Example:

$('.normal').fadeTo();
$('div').fadeTo(1000);
$('#slow').fadeTo('slow', function() {
    alert('fadeTo effect completed.');
});

You can check here demo example for fadeTo() effect.