Animations

Introducing Animations

Animations

Up until now, whenever we've manipulated the DOM the results have just appeared. While this is just fine, it can sometimes be a bit jarring to the user. It would certainly be nice if we could have just a little animation, to either make our page look more professional, or to draw the user's attention to the new or updated content.

hide, show and toggle

jQuery offers many animations. The first two are hide and show. As you might suspect, hide causes something to disappear from the screen, while show causes something to appear. toggle, on the other hand, determines the current status of the item in question and changes it. So if the item was currently hidden, toggle would call show, and if the item was visible, toggle would call hide.

Behind the scenes, jQuery controls visibility by using the display property in CSS. When you hide and item, jQuery will store the current value of display (such as inline or block) and then set the display to none. When you call show, jQuery resets the display CSS property back to the value it had stored before.

hide, show and toggle all take several parameters, including a set of options that allow you to control things like "easing", which is how the animation is going to take place. Most commonly the only parameter you will provide is the duration you wish the animation to take place over, in milleseconds.

<div id="target">Show or hide</div>
<button type="button" id="btn-toggle">Toggle</button>

$(function() {
	$('#btn-toggle').click(function() {
		// animation will take one second
		$('#target').toggle(1000);
	});
});

One final note about this, and all animations. Animations in jQuery return a promise object, which can be used to run code after an animation completes. We'll discuss promises in Module 3.

Animations in action

Animations in action

In the prior demonstrations and videos, we saw how to use show, hide and toggle to easily modify the visibility of an item, while also adding a little bit of animation to the UI. While this is certainly a neat trick, there's a very good chance you'll want to start a UI with a section already hidden.

Imagine the following scenario:

<form>
    <div>
        <label>Name:</label>
        <input type="text" />
    </div>
    <div>
        <label>Additional information:</label>
        <input type="text" />
    </div>
</form>

In the above form, we want to prompt the user for their name, and additional information. But what happens if that additional information is optional? It would be nice to provide some form of a button, checkbox, or otherwise, to enable the user to display the additional information section, rather than always displaying it.

Or, imagine if you were building a page where you had additional details, maybe a user agreement, that many people will ignore. Displaying that on the page takes up unnecessary real estate.

In both of those scenarios, it'd be great if we could hide the item, and only if the user indicates they want to see the extra data should we show it to them.

We can accomplish this by starting with the following HTML, updated from before:

<style>
    .hidden { display: none; }
</style>
<form>
    <div>
        <label>Name:</label>
        <input type="text" />
    </div>
    <button type="button" id="show-additional-information">
        Show additional information
    </button>
    <div id="additional-information" class="hidden">
        <label>Additional information:</label>
        <input type="text" />
    </div>
</form>

...and then added the following script

$(function() {
    $('#show-additional-information').click(function() {
        $('#additional-information').show(750);
    });
});

You'll notice that we're setting the div element with additional-information as its ID to display:none to start. The display property is what show will modify. We're then setting up the click event handler to call show, which will then cause the item to display.

Fading and sliding

Fading

Both show and hide have a vertical animation. The new content sort of "rolls" onto the screen, or "rolls" up from the screen. If you don't want that additional animation, and just want the item to slowly appear or disappear, you can use fading.

fadeIn, fadeOut and fadeToggle

Like their show/hide counterparts, fadeIn and fadeOut will display and hide an item respectively. And, like toggle, fadeToggle will reverse the current state of the item.

The fading functions perform their work by both modifying the CSS display property, and animates the item by modifying its opacity. If you want an item to start as hidden by default, and display it using fadeIn, you only need to set display: none; there is no need to modify the starting opacity.

Like all animation functions, the fading functions accept various parameters with the most common being the length of time (in milliseconds). Also, the fading functions return a promise, which we'll explore in Module 3.

Sliding

Unlike the other animations, the sliding functions cause the entire item to either slide down or slide up.

Keeping with the conventions we've already seen, slideDown will cause an item to appear, slideUp will cause it to disappear, and slideTogglewill cause change its state.

The sliding functions perform their work by both modifying the CSS display property, and animates the item by modifying its position. If you want an item to start as hidden by default, and display it using slideDown, you only need to set display: none; there is no need to modify the starting position.

Like all animation functions, the sliding functions accept various parameters with the most common being the length of time (in milliseconds). Also, the sliding functions return a promise, which we'll explore in Module 3.