JQUERY fade

Click Here

For the fade effect there are 4 possibilities: fadeIn, fadeOut, fadeToggle and fadeTo

FadeIn

The fadeIn() effect allows smoothly view any element of the HTML document. At the end of the effect, the result is the same as the effect show().

Example JQUERY fadeIn() To hide all elements

$("p").fadeIn();

You can have 2 optional parameters (speed and callback)

The parameter speed indicates the milliseconds that it should take effect.

The parameter callback indicates JQUERY function to be executed at the end of the effect.

Example JQUERY fadeIn (speed, callback)

To hide all <p> elements, with a duration of 2 seconds and display an alert that it has completed the effect

$("p").fadeIn(
2000,
function(){ alert("Now the text is already displayed");}
);

FadeOut

The fadeOut() effect can blur an item until it is invisible. At the end of the effect, the result is like the hide() effect.

Example JQUERY fadeOut() to hide all <p> elements

$("p").fadeOut();

You can have 2 optional parameters (speed and callback)

The speed parameter indicates the milliseconds that it should take effect.

The callback parameter indicates JQUERY function to be executed at the end of the effect.

Example JQUERY fadeOut (speed, callback)

To hide all <p> elements, with a duration of 2 seconds and display an alert that it has completed the effect

$("p").fadeOut(
2000,
function(){ alert("El parrafo ya no se ve");}
);

FadeToggle

The fadeToggle() effect toggles between fadeOut() effect and fadeIn() effect.

That is, if the item is hidden then show it. And conversely, if visible, hidden.

The effect is soft, like magic. At the end of the effect, the result is the same as toggle() effect.

Example JQUERY fadeToggle()

To hide a <p> element that is displayed or to display a hidden element

$("p").fadeToggle();

It also allows to include the parameters "speed" and "callback"

FadeTo

The fadeTo() blurring effect allows an element to a degree of opacity.

The opacity is any value between 0 (hidden) and 1 (visible).

It has 2 mandatory parameters (speed, opacy) and 1 optional parameter (callback)

The mandatory parameter speed indicates the milliseconds that it should take effect. Value in milliseconds. Other generic values are "slow" and "fast".

The mandatory parameter opacy indicates the opacity value. Decimal value between 0 and 1. For example 0.15

The optional parameter callback indicates JQUERY function that can be executed at the end of the effect.

Example JQUERY fadeTo()

Slowly diffuse to all <p> elements

$("p").fadeTo("slow",0.15);

Example JQUERY fadeTo()

3 seconds to blend all <p> elements

$("p").fadeTo(3000,0.15);

Example JQUERY fadeTo(speed, callback):

For fast blur all <p> elements and to show an alert that it has completed the effect

$("p").fadeTo( "fast", 0.20, function(){ alert("All paragraphs are blurred");} );

Click Here