JQuery Effects
JQuery has provided method to create effects in a page.
JQuery has provided following fading methods-
1-FadeIn(): jQuery fadeIn() method is used to fade in a hidden element.
Syntax:$(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.
Example: $("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
Above code will fade in the div1,div2 and div3 on button click.
2-FadeOut(): The jQuery fadeOut() method is used to fade out a visible element.
Syntax:$(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 a function to be executed after the fading completes.
The following example demonstrates the fadeOut() method with different parameters:
Example:$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
Above code will fade out the div1,div2 and div3 on button click.
3-FadeToggle():fadeToggle() method toggles between the fadeIn() and fadeOut() methods.
If the elements are faded out, fadeToggle() will fade them in and if the elements are
faded in, fadeToggle() will fade them out.
Syntax:$(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 a function to be executed after the fading completes.
Example:
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
4-FadeTo()Method: This method allows fading to a given opacity (value between 0 and 1).
Syntax:$(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 specifies fading to a given opacity
(value between 0 and 1).
The optional
callback parameter is a function to be executed after the function completes.
Example: $("button").click(function(){
$("#div1").fadeTo("slow", 0.15);
$("#div2").fadeTo("slow", 0.4);
$("#div3").fadeTo("slow", 0.7);
});
JQuery Effects - Sliding
The jQuery slide methods allows developer to slides elements up and down,this effect is similar to theatre's curtain up(when show starts) and curtain down(when show ends).
jQuery has the following slide methods:
1-slideDown():The jQuery slideDown() method is used to slide down an element,similar to theatre's curtain down(when show ends).
Syntax:$(selector).slideDown(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 sliding completes.
The following example demonstrates the slideDown() method:
Example: $("#panel").slideDown();
2-slideUp(): The jQuery slideUp() method is used to slide up an element,similar to theatre's curtain up(when show starts).
Syntax:$(selector).slideUp(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 sliding completes.
The following example demonstrates the slideUp() method:
Example: $("#panel").slideUp();
3-slideToggle():The jQuery slideToggle() method toggles between the slideDown() and slideUp() methods.If the elements have been slide down, slideToggle() will slide them up and
if the elements have been slide up then slideToggle() will slide them down.
Syntex-$(selector).slideToggle(speed,callback);
The optional
speed parameter can take the following values: "slow", "fast", milliseconds.
The optional
callback parameter is a function to be executed after the sliding completes.
Example: $("#panel").slideToggle();