All the Methods of jQuery Fade Explained Using Real Examples

jQuery fade effect combines the functionality of showing and hiding certain elements, but also adds a transition animation to it. The elements don't appear and disappear instantly: you can see them fading in and out gradually. Such an effect might be more pleasing on the eye, and make the web page look more impressive.

We will now explain to you how different methods of fade jQuery effect can be used and illustrate it with editable code examples.

jQuery Fade: Main Tips

• The fade jQuery method is used to hide and show items with a transition animation.
• It achieves that by gradually increasing or decreasing the opacity.
• There are four methods you can use to make jQuery images fade.

Choice of Methods

The fade jQuery method is used to show and hide items with a transition effect, which gradually decreases or increases the opacity.

There are four methods that apply this effect:

• .fadeIn() - makes an item appear by gradually increasing jQuery fade opacity.
• .fadeOut() - makes an item disappear by gradually decreasing jQuery fade opacity.
• .fadeTo() - makes an item fade to a specific opacity.
• .fadeToggle() - makes jQuery toggle fade by alternating between the effects of fadeIn and fadeOut.

Toggle or No Toggle?

jQuery .fadeIn() and .fadeOut() methods are very similar to the hide and show methods that we covered earlier. If you would like an item only to appear or disappear once and for all (unless the page is reloaded, of course), simply using one of these will do.

However, if you would like an item to toggle its visibility as well as have a fade effect, it's best you use the jQuery toggle fade method.

The syntax for all of these three methods follows a pattern like this:

$(selector).fadeIn | fadeOut | fadeToggle(duration,callback);

Both of the parameters fade jQuery statement uses are optional:

• duration is string or number value (in milliseconds) that specifies how long the animation will take.
• callback denotes function to be executed once the method's execution is complete.

Duration takes in specific keyword values that are formed as strings:

• slow - 600-millisecond duration
• fast - 200-millisecond duration

Additionally, it should be noted that the default duration of the animation is 400 milliseconds.

Using .fadeTo()

The .fadeTo() method is very similar to the other jQuery fade methods, but has one key difference: instead of fading completely in or out, it fades to a specific opacity.

Because of this, its syntax is a little bit different, as it accepts opacity as an extra parameter. It is defined by a value between 1 and 0:

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

jQuery Fade: Summary

• To make jQuery images fade and appear again, developers use the fade method in jQuery.
• As jQuery fade opacity increases or decreases gradually, the transition animation hides HTML elements.
• You may use jQuery .fadeIn(), .fadeOut() and .fadeTo() methods, and combine them with toggle functionality.