Delphinidin

The fade-in and fade-out effects can add another dimension of interactivity to the elements on a Web site. Most oft en, the fade effect is used with image galleries or image slideshows where one image fades out as another image fades in. Up until a few years ago, it seemed the only way to achieve such an effect was by using Flash to create an animated image slideshow or by using advanced JavaScript that required many lines of code.

jQuery has made it possible to use native JavaScript effects without having to interact directly with the hard-to-understand JavaScript API. With the effects introduced by jQuery, the same animated slideshow can now be implemented in JavaScript. Using JavaScript-based slideshows instead of Flash gives you a SEO (search engine optimization) advantage because not all search engines are able to index the content found within Flash files. A key CSS property that is used in conjunction with the fading of elements on a Web page is the opacity property.The opacity property takes a value from 0 to 100 or 0.0 to 1.0 and is used in the fadeIn and fadeOut methods.

The fadeIn effect is set up in a similar way to the show effect. You have two optional parameters that can be passed in: duration and callback. The duration parameter determines how long the animation runs in fast or slow, as well as milliseconds (600, 200, 700, and so on). The callback parameter allows you to link up a function that executes when the show effect is complete.

$(selector).fadeIn(duration, callback)

The fadeOut is identical to fadeIn except that instead of fading an element in, it fades it out. The fadeTo effect allows you to distinguish an opacity level that you would like the selected element to fade to.

$(selector).fadeIn(duration, opacity, callback)