Jquery Fading Effects

The use of jQuery among web designers continues to be growing in popularity. With regard to fading techniques, the typical methods used are fadeIn(), fadeOut(), fadeTo(), and fadeToggle().

Syntax

HTML Example

We will use the following HTML for the examples listed below.

FadeIn / FadeOut

In the following example, we will use the click event to trigger the fadeIn() and fadeOut() method on the div element adjacent to the images.

FadeTo

In the following example, we will use the click event to trigger the fadeTo() method to apply this fading effect to the adjacent div element.

FadeToggle

The fadeToggle() method animates the opacity of the matched elements. When triggered on an element, the element’s display style property is set to none once the opacity reaches 0.