jQuery 1.4 Animation Techniques Beginner's Guide

Fading elements out

The fadeOut() method is syntactically identical to fadeIn() in that it accepts the same arguments and adjusts the opacity of the selected element, except that with the fadeout() method, the target element is hidden instead of being shown. Let's look at this method in action with a brief example.

When elements need to be removed from the page, using a subtle fade out can be much more effective than just removing the element in question. We may have an overlay of some description, like a dialog box for example, on the page which can be closed by the visitor. Instead of having it disappear instantly, we can animate its disappearance smoothly.

In this example, we'll look at the following aspects of using fadeOut():

• Hiding an element ...