Bring Animation to Web Pages Using JQuery FadeOut

jquery fadeoutWhen a movie scene slowly fades on the silver screen, dozens of image frames may flash before your eyes quickly. JQuery can help you add similar fadeOut effects to images, text and other objects on a web page. A jQuery fadeOut is simply an animation that occurs when a browser alters a page element’s opacity over time. Opacity is a CSS property similar to color and height. Elements with 100 percent opacity appear solid while elements with no opacity are transparent. When your code executes, the fadeOut method, an element’s opacity changes to zero over time.

Let Udemy.com help you master jQuery fundamentals rapidly.

JQuery FadeOuts in One Line of Code

One of JQuery’s most useful features is its ability to reduce the amount of code people write to perform complex tasks. For example, consider the following code sample:

$('p').fadeOut();

Even though it only consists of one statement, this code causes every paragraph on a Web page to fade out. Replace ‘p’ with the name of another DOM element if you’d like those elements to fade instead. The code shown below fades all divs on a page:

$('div').fadeOut();

The jQuery fadeOut method accepts parameters that control the way the fadeOut works. If you don’t pass a parameter, the fadeOut takes 400 milliseconds to complete by default. If you’d like your animation to move faster or slower, pass a value that’s smaller or larger than 400, as seen in the following statement:

$( 'p').fadeOut(1000);

In this example, the 1000 value tells jQuery to fade the paragraph elements out over a period of 1000 milliseconds. Smaller values make the effect go faster. You can also use the words ‘slow’ or ‘fast’ instead of numbers to control the animation speed.

Add Special Effects to Your Special Effects

Like many jQuery methods that produce special effects, the fadeOut method accepts additional arguments. For instance, you can pass it an optional easing parameter that changes the way the animation occurs. If that parameter’s value is ‘swing,’ the animation moves slowly at the beginning and picks up speed during the middle part of the effect. The following code shows the second easing parameter:

$('p').fadeOut('slow', 'swing');

Change ‘swing’ to ‘linear’ when you’d like the animation to move at a constant speed.

Sometimes a Web application needs to know when a process ends. JQuery’s fadeOut method accepts another optional parameter that causes a callback function to execute when a fadeOut animation completes, as seen below:

$('p').fadeOut('slow', 'swing', function(){

alert('fadeOut complete');

});

The third parameter is an anonymous function. It contains an alert method that displays the words “fadeOut complete” when the fadeOut animation finishes. Replace the alert statement with statements you want to run when your animation finishes. Instead of passing an anonymous function to the fadeout method, you could pass the name of a real function, as shown in the following example:

$('p').fadeOut('slow', myFunction);

If your code contains a function named myFunction, it runs when the fadeOut animation completes. Want to learn more about jQuery functions? Discover powerful tips at Udemy.com.

Harness the Power of Other JQuery Fade Methods

Web developers often use the jQuery fadeIn method with the fadeOut method. The fadeIn method makes elements fade into view, as shown below:

$('p').fadeIn();

The fadeIn method accepts the same parameters as the fadeOut method. Suppose one of the arguments in your fadeOut statement is a callback function. If you place a fadeIn statement in that callback function, your elements will fade out and then fade back in again. That happens because the fadeOut statement makes them disappear and the callback function fades them in when it runs. Your callback function could also contain fadeOut or fadeIn statements that made other elements fade in or fade out as needed.

There may be times when you’d like to create an unusual special effect where an element fades but doesn’t disappear completely. FadeOut can’t do this but fadeTo can, as seen in the following code sample:

$('p').fadeTo('slow',0.10, myFunction);

The first argument in this statement tells jQuery to run the effect at a slow speed. The most important argument is the second one that specifies the opacity you’d like to achieve. In this example, that value is 0.10. That value changes the element’s opacity to 10 percent. The final optional parameter, myFunction, references a callback function that runs when the animation completes.

Web Page Events and the JQuery FadeOut Method

If you’re new to jQuery, pick up some valuable beginner advice from uDemy. One of the most important things you can learn is how to make things happen when site visitors perform certain actions. JQuery provides a simple way to add click events to buttons, as seen below:

$(document).ready(function(){

$(' #fadeButton').click(function(){

$('p').fadeOut();

});

});

The document.ready function executes after your Web page loads in a browser. In this example, the document.ready function adds a click event to a button whose ID is fadeButton. Note the third statement in the code sample. It’s calls the fadeOut method that tells jQuery to fade all paragraphs when someone clicks the button. If you needed to set up additional event handlers, you could place them in the document.ready function.

Important JQuery Tips

After a Web page element’s opacity reaches zero at the end of a fadeOut animation, browsers set the element’s display property to none. In other words, the element doesn’t simply disappear leaving an empty hole; the hole vanishes too. The following hypothetical Web page can help you visualize this process:

THIS IS HEADING #1

This is a paragraph

THIS IS HEADING #2

If your code fades the paragraph out, the space it took up disappears causing the second heading to move directly below the first heading. It’s important to understand this so you can plan your page layouts as needed. For instance, you don’t want to be surprised when a large image fades out and content on the bottom of your Web page moves up towards the top because the image disappeared.

Although the jQuery fadeOut method can create impressive special effects, it’s a good idea to test them before moving a website into production. For instance, you may discover that an animation time of 5000 milliseconds is too long after you view the effect in a browser. By experimenting with different combinations of fadeOut, fadeIn and fadeTo functions, you’ll discover exciting new ways to create Web pages that people love to visit and explore.