Introduction to Effects

Introduction

Welcome to the jQuery documentation! This lab will give you an introduction to effects.

jQuery makes it trivial to add simple effects to your page. Effects can use the built-in settings, or provide a customized duration. You can also create custom animations of arbitrary CSS properties.

Skills Graph

Showing and Hiding Content

index.html have already been provided in the VM.

jQuery can show or hide content instantaneously with .show() or .hide():

// Instantaneously hide all paragraphs
$("p").hide();

// Instantaneously show all divs that have the hidden style class
$("div.hidden").show();

When jQuery hides an element, it sets its CSS display property to none. This means the content will have zero width and height; it does not mean that the content will simply become transparent and leave an empty area on the page.

jQuery can also show or hide content by means of animation effects. You can tell .show() and .hide() to use animation in a couple of ways. One is to pass in an argument of 'slow', 'normal', or 'fast':

// Slowly hide all paragraphs
$("p").hide("slow");

// Quickly show all divs that have the hidden style class
$("div.hidden").show("fast");

If you prefer more direct control over the duration of the animation effect, you can pass the desired duration in milliseconds to .show() and .hide():

// Hide all paragraphs over half a second
$("p").hide(2000);

// Show all divs that have the hidden style class over 1.25 seconds
$("div.hidden").show(1250);

Most developers pass in a number of milliseconds to have more precise control over the duration.

Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Changing Display Based on Current Visibility State

jQuery can also let you change a content's visibility based on its current visibility state. .toggle() will show content that is currently hidden and hide content that is currently visible. You can pass the same arguments to .toggle() as you pass to any of the effects methods above.

// Instantaneously toggle the display of all paragraphs
$("p").toggle();

// Toggle the display of all divs over 1.8 seconds
$("div").toggle(1800);

.toggle() will use a combination of slide and fade effects, just as .show() and .hide() do.

You can refresh the Web 8080 Tab to preview the web page.

Something After an Animation Completes

A common mistake when implementing jQuery effects is assuming that the execution of the next method in your chain will wait until the animation runs to completion.

$("div.hidden").fadeIn(1500).addClass("lookAtMe");

It is important to realize that .fadeIn() above only kicks off the animation. Once started, the animation is implemented by rapidly changing CSS properties in a JavaScript setInterval() loop. When you call .fadeIn(), it starts the animation loop and then returns the jQuery object, passing it along to .addClass() which will then add the lookAtMe style class while the animation loop is just getting started.

To defer an action until after an animation has run to completion, you need to use an animation callback function. You can specify your animation callback as the second argument passed to any of the animation methods discussed above. For the code snippet above, we can implement a callback as follows:

// Fade in all hidden paragraphs; then add a style class to them (correct with animation callback)
$("div.hidden").fadeIn(1500, function () {
  // this = DOM element which has just finished being animated
  $(this).addClass("lookAtMe");
});

Note that you can use the keyword this to refer to the DOM element being animated. Also note that the callback will be called for each element in the jQuery object. This means that if your selector returns no elements, your animation callback will never run! You can solve this problem by testing whether your selection returned any elements; if not, you can just run the callback immediately.

// Run a callback even if there were no elements to animate
var someElement = $("#nonexistent");

var cb = function () {
  console.log("done!");
};

if (someElement.length) {
  someElement.fadeIn(300, cb);
} else {
  cb();
}

You can refresh the Web 8080 Tab to preview the web page.

Summary

Congratulations! You have completed the Introduction to Effects lab. To learn more about the jQuery API, please see the official jQuery documentation.