If you want to fade an HTML element or div, you can use jQuery Fading Effect Using comes with few handy functions to use. These functions are given below to perform jQuery fadein and fadeout.

  • fadeIn()
  • fadeOut()
  • fadeToggle()
  • fadeTo()

Now let’s check out all of them to understand how to use jQuery fade in and fade out effects using the jQuery methods on page load.

jQuery Fading Effect Using fadeIn() Method on Page Load

The HTML element is in hidden state at the starting point and the fadeIn() can be used to fade in the HTML element. The jQuery fade in method means to display the hidden HTML element by increasing the opacity of the element.

The syntax of fade in the method is given below.
Syntax of fadeIn()

The syntax contains three parameters selectors, speed, and callback. The first parameter ‘selector’ is the required field while the last two parameters speed and callback are optional to use.

Every jQuery Fading Effect can be used with below-given parameters.

Sr. No Parameter Name Description
1 selector The selector can be used to access the HTML element and apply the required fade in the method.
2 speed The first optional parameter ‘speed’ can be used to give the speed of the fade in the element. The possible values can be ‘slow’, ‘fast’ or value in milliseconds.
3 callback A callback optional parameter is the function used to execute after the occurrence of the fade in method.

Example of fadeIn()

Output


jQuery Fading Effect Using fadeOut() Method on Page Load

The method can be used to fade out the HTML element. The jQuery fade out method means to hide the HTML element by decreasing the opacity of the element.

The syntax of jQuery fade out method is given below.
Syntax of fadeOut()

The syntax of fadeOut() contains the same three parameters selectors, speed, and callback. The selector parameter is the required field to provide while the last two parameters speed and callback are optional to use.

Sr. No Parameter Name Description
1 selector In order to access the HTML element you have to provide the selector parameter and apply the required jQuery fade-out method.
2 speed The ‘speed’ is the optional parameter can be used to give the speed of the fade out element. The possible values can be ‘slow’, ‘fast’ or value in milliseconds.
3 callback The callback is the optional parameter is the function used to execute after the occurrence of the fade out method.

Example of jQuery fadeOut()

Output

This is the paragraph to show fade in effect.

jQuery Fading Effect Using fadeToggle() Method on Page Load

The jQuery fadeToggle() method perform both the operation fade in and fade out by increasing or decreasing the opacity. When the element is in the hidden state it will fadein the element and if the element is in displayed it will fadeout the element.

The syntax of the jQuery Fade Toggle method is given below.
Syntax of fadeToggle()

The syntax of jQUery fadeToggle() contains the same three parameters selectors, speed, and callback as you learnt for fadein and fadeout functions. In given three parameters, the selector parameter is the only one required field to provide while the other given two parameters(speed and callback) are optional parameters you can use.

Sr. No Parameter Name Description
1 selector You can access the HTML element by providing the selector parameter and apply the required jQuery fade toggle method.
2 speed The ‘speed’ parameter is the optional parameter which gives the speed for both the fadein and fadeout feature performed by the single fadetoggle function. The possible values can be ‘slow’, ‘fast’ or value in milliseconds.
3 callback The callback is the optional last parameter which contains the function to execute after the fadein and fadeout effects occur.

Example of fadeToggle()

Output

This is the paragraph to show fade toggle effect.


jQuery Fading Effect Using fadeTo() Method on Page Load

The fadeTo() method perform fading effect to a specified opacity. You have to specify the speed parameter to which the opacity effect applies to the HTML element. The effect of this method is similar to the fadein effect but with given opacity.

The syntax of the fadeto method is given below.
Syntax of fadeTo()

The syntax of fadeTo() contains the same four parameters selectors, speed, opacity and callback functions. In the given four parameters, the selector, speed and opacity parameters are the required fields to provide while the one parameter callback is the optional parameter you can use.

Sr. No Parameter Name Description
1 selector You can access the HTML element and apply the fadeto effect by providing the selector parameter.
2 speed The ‘speed’ parameter is the required parameter to specify the speed of the fadeto function. The possible values can be ‘slow’, ‘fast’ or value in milliseconds.
3 opacity The ‘opacity’ parameter is the required parameter which gives the opacity to perform the fadeto function which gives effect as of fadein. The possible values start from 0 to 1.
4 callback The callback is the optional last parameter which contains the function to execute after the fadeto effect occurs.

Example of fadeTo()

Output

This is the paragraph to show fadeto effect.


You must also read.

Leave a Reply

Your email address will not be published. Required fields are marked *