jQuery Fade

In this tutorial you will learn how to fade in and out elements using jQuery Fade Methods.

jQuery fadeIn() and fadeOut() Methods

You can use the jQuery fadeIn() and fadeOut() methods to display or hide the HTML elements by gradually increasing or decreasing their opacity.

Like other jQuery effects methods, you can optionally specify the duration or speed parameter for the fadeIn() and fadeOut() methods to control how long the fading animation will run. Durations can be specified either using one of the predefined string'slow' or 'fast', or in a number of milliseconds; higher values indicate slower animations.

Note:The effect of fadeIn()/fadeOut() method looks similar to show()/hide(), but unlike show()/hide() method the fadeIn()/fadeOut() method only animates the opacity of the target elements and does not animates their dimensions.

You can also specify a callback function to be executed after the fadeIn() or fadeOut()method completes. We’ll learn more about the callback function in upcoming chapters.

jQuery fadeToggle() Method

The jQuery fadeToggle() method display or hide the selected elements by animating their opacity in such a way that if the element is initially displayed, it will be fade out; if hidden, it will be fade in.

Similarly, you can specify the duration parameter for the fadeToggle() method likefadeIn()/fadeOut() method to control the duration or speed of the fade toggle animation.

Similarly, you can also specify a callback function for the fadeToggle() method.

jQuery fadeTo() Method

The jQuery fadeTo() method is similar to the .fadeIn() method, but unlike .fadeIn() thefadeTo() method lets you fade in the elements to a certain opacity level.

$(selector).fadeTo(speed, opacity, callback);

The required opacity parameter specifies the final opacity of the target elements that can be a number between 0 and 1. The duration or speed parameter is also required for this method that specifies the duration of the fade to animation.

This is all about jQuery Fade effect. For any question, you may post at our Forum Section.

Loading