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 with the
fadeOut()methodUsing a numerical argument to control the duration
Running additional code once the animation completes
This is how our dialog will disappear from the page:
In the previous screenshot, we see the dialog gradually fading from...
