Fading Effects in Jquery

Fading effects in jquery is very easy as jquery provide the required functions which are necessary for the user requirements for fading effects. Here is the list of the function which are given in the documentation of the jquery.

Function Name
Function Name
fadeIn(speed, callback)
fadeOut(speed, callback)
fadeTo(speed, opacity[, callback])

All the function in the above list return same object on which the function apply the fading which can be used for chaining purpose. The fading function work on the opacity property of the element mean these functions will increase or decrease the opacity property to achieve the goal of fading effect. The example used for this post is similar to the example in my previous post Sliding animation in jquery. Now let us start with our example code. To recall your memories the controls used in this example are three buttons named cmdFadeIn, cmdFadeOut and cmdFadeTo so that you understand the purpose of the buttons by theirs names, and one div element named myDiv which is used for the fading purpose and i have fill the div element with the black color so that the area of the div is visible to you and you will see the fading effect on the div element.

First of all i will write the code for the fadeIn function and then will explain the code, how the code work what are the required parameters and what are the optional.

$("#cmdFadeIn").click(function()
{
$("#myDiv").fadeIn('slow',CallBackFunction);
});

function CallBackFunction()
{
alert("Call back Function Called.");
}     

The above code is complete code you can use to pass the maximum number of parameters to the fadeIn function. Which are the speed and the callback function to the fadeIn Function. First i have bind the click event to the my button control by using the id of the button control which is "cmdFadeIn" and then in the definition of the click event function for the button. I have used the div control id to bind the fadeIn function by passing the parameter slow and attaching the call back function to the fadeIn function call. Which in this case is the CallBackFunction function .if you want to omit the speed parameter then you can omit the speed parameter and the default value of the speed is used which is the normal speed. As in my previous post i have said that the fading function only change one property which is the opacity of the element. In case of fadeIn the opacity of the element is increase and the element is shown. if the element is shown, mean its opacity is to the maximum then it will not animate the element as it is visible. But if you attach the callback function to the fadeIn function then that function is called every time the fadeIn function is called whether fading effect are applied or not.

Here is the code you can use to call the fadeOut function of the fading animation effects. The code is similar to the code for the fadeIn only change is the function call which is replace by fadeOut.

$("#cmdFadeOut").click(function()
{
$("#myDiv").fadeOut('slow',CallBackFunction);
});

function CallBackFunction()
{
alert("Call back Function Called.");
} 
    

The fadeOut function is opposite to the fadeIn function. What fadeOut function do is that it will decrease the opacity property of the element to hide them. If you provide the speed value or animation time to complete the showing of the element then it will show the element in that interval of time. if no speed value is given then the normal parameter is taken as default parameter which has the value of .4 milliseconds to complete the animations.

$("#cmdFadeTo").click(function()
{
$("#myDiv").fadeTo('slow',0.5,CallBackFunction);
});

function CallBackFunction()
{
alert("Call back Function Called.");
}
     

In above code the fadeTo function is called with maximum number of parameters. For calling the fadeTo function you must provide the speed and opacity parameter, the opacity parameter denote the resultant opacity of the control, which can be from 0(zero) to 1. Once the animation of the fading is completed the callback function is called, if provided in the parameter list. The fadeTo function is will decrease the opacity of the element, if the element is fadeOut mean hide then it will change the opacity value of the element to the value which is passed as parameter to the function, but you can't see fading effects as the element is fadeOut before. Now if you apply the fadeIn effect then you can see opacity of the element is as set by the fadeTo function.

Unlike the other effects that adjust opacity while hiding or revealing elements, fadeTo() doesn’t remember the original opacity of an element. This makes sense because the whole purpose of this effect is to explicitly change the opacity to a specific value.

Hope you will get some idea about the fading effect in jquery. You can download the source code from here


All and any comments / bugs / suggestions are welcomed!