Jquery Fading Effects

jQuery has several methods that can be used to adjust the opacity of elements. These methods are just a few of the variety of methods that can be used to create animation 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

$(selector).fadeIn(speed,callback) $(selector).fadeOut(speed,callback) $(selector).fadeTo(speed,opacity,callback) $(selector).fadeToggle(speed,easing,callback)

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.