jQuery fading effects are used to show the hidden element gradually. After applying the fadeIn() method element opacity gradually increases from zero to one.
There are following jQuery fading methods.
fadeIn()fadeOut()fadeToggle()fadeTo()Jquery fadeIn() method is used to show the hidden element gradually. After applying the fadeIn() method element opacity is gradually increased from zero to one. Therefore hidden element is shown gradually.
$(selector).fadein();
$(selector).fadeIn(speed,callback);
$(selector).fadeIn(speed, easing, callback);
speed: It is an optional parameter. It specifies the speed of the delay of the fadeIn() method. It has the following values: "slow", "fast" and milliseconds.
easing: It specifies the easing function that is used for transition.
callback: It is also an optional parameter. The callback function will be called after the completion of fadein() effect.
Source Code
$(".fadein-effect").click(function () {
$(".normal").fadeIn();
$(".slow-fadein").fadeIn("slow");
$(".fast-fadein").fadeIn(3000);
});
jQuery fadeOut() method hides the visible element means this method decreases the opacity of the selected element from one to zero hence element is not shown on the screen.
Source Code
$(".normal").fadeOut();
$(".slow-fadein").fadeOut("slow");
$(".fast-fadein").fadeOut(3000);
Please keep in mind that speed and callback both are optional parameters.
The optional speed parameter indicates the fadeOut duration and it takes the following string values "slow" and "fast" and milliseconds
The optional callback function is executed whenever the fadeOut() method completes.
The jQuery fadeToggle() method is used to toggle between the fadeIn() and fadeOut() methods. If the elements are faded out then fadeToggle() method is used to fade in the element on the other hand if the element is faded in then fadeToggle() is used to fade out the element.
Source Code
$(".btn-fadetoggle-efefct").click(function () {
$(".normal").fadeToggle();
$(".slow").fadeToggle("slow");
$(".very-slow").fadeToggle(4000);
});
Please keep in mind that both parameters are optional. The optional parameter speed indicates the duration of fadeToggle() method and it takes the following values: "slow", "fast" or milliseconds.
The optional parameter callback function is worked whenever the fadeToggle() method is completed.
The jQuery fadeTo() method is used to fade the element for a given opacity(between 0 and 1).
Source Code
$(".btn-fadeto-effect").click(function(){
$(".slow1").fadeTo("slow", 0.15);
$(".slow2").fadeTo("slow", 0.4);
$(".slow3").fadeTo("slow", 0.7);
});
Please keep in mind that the required parameter speed indicated the duration of effect.It takes the following values:"fast","slow" and milliseconds.
Opacity is the required parameter that fades the element for a specific opacity. Its value varies between 0 to 1.
The callback is the optional parameter of the fadeTo() method that works whenever the fadeTo() method completes.
