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.

Adding new elements

Manipulating the DOM

Manipulating the DOM

As we've already seen, html and text can be used to update the page. The problem with those functions, however, is those functions replace the contents of the element they're called on, rather than modifying the content. You could, I suppose, keep appending text, but after a while your code will fall under its own weight.

jQuery offers several functions to easily manipulate the DOM.

Internal DOM manipulation

If you wish to update the contents of an element by adding or removing elements, you can use append, appendTo, prepend and prependTo. Remember that the element you target will become the container for the new element. So using append will add a new element inside the target, not after the element. (There's another function for that.)

prepend and prependTo

prepend and prependTo add new content to the begining of the contents of a target. The difference between them is the order in which the parameters and target are passed in. The lines of code below are semantically identical.

// prepend is called on the target, and accepts the new content as the parameter
$('#target').prepend('<div>New content</div>');

// prependTo is called on the new content, and accepts the target as the parameter
$('<div>New content</div>').prependTo('#target');

If you had the following starting HTML

<div id="target">
 <div>existing content</div>
</div>

And executed either of the lines of JavaScript above, the result would be as follows.

<div id="target">
 <div>New content</div>
 <div>existing content</div>
</div>

append and appendTo

append and appendTo add new content to the end of the contents of a target. The difference between them is the order in which the parameters and target are passed in. The lines of code below are semantically identical.

// append is called on the target, and accepts the new content as the parameter
$('#target').append('<div>New content</div>');

// appendTo is called on the new content, and accepts the target as the parameter
$('<div>New content</div>').appendTo('#target');

If you had the following starting HTML

<div id="target">
 <div>existing content</div>
</div>

And executed either of the lines of JavaScript above, the result would be as follows.

<div id="target">
 <div>existing content</div>
 <div>New content</div>
</div>

External DOM manipulation 

External DOM manipulation

Functions such as prepend add new content inside of the target, using the target as a container for the new content. If you wish to add new content before or after an existing element, jQuery provides after, insertAfter, before, and insertBefore.

after and insertAfter

after and insertAfter both add new content after the target, on the same level of the hierarchy, rather than inside the target. The difference between the two functions is the order of parameters and target.

// after is called on the target, and accepts the new content as a parameter
$('target').after('

New content
');

// insertAfter is called on the new content, and accepts the target as a parameter
$('

New content
').insertAfter('#target');

If you had the following HTML as the starting point:

<div id="target">
 <div>existing content</div>
</div>

... calling either of the lines of JavaScript above would produce the following result:

<div id="target">
 <div>existing content</div>
</div>
<div>New content</div>

before and insertBefore

before and insertBefore both add new content after the target, on the same level of the hierarchy, rather than inside the target. The difference between the two functions is the order of parameters and target.

// before is called on the target, and accepts the new content as a parameter
$('target').before('

New content
');

// insertBefore is called on the new content, and accepts the target as a parameter
$('

New content
').insertBefore('#target');

If you had the following HTML as the starting point:

<div id="target">
 <div>existing content</div>
</div>

... calling either of the lines of JavaScript above would produce the following result:

<div>New content</div>
<div id="target">
 <div>existing content</div>
</div>

https://codepen.io/GeekTrainer/pen/1afc4d560d697b40f26e48b7b24a7f4e/

Wrapping Contents

Wrapping existing content with new content

There will be times you'll need to manipulate the DOM by surrounding existing content with a new element. jQuery provides several wrapping functions to perform that type of an operation.

wrapping functions

For the wrap and wrapAll demonstrations below, we'll be using this HTML as the starting point:

<div id="target">
 <div class="demo">Item one</div>
 <div class="demo">Item two</div>
</div>

wrap

The wrap function wraps each item with the element passed into the function. As a result, if you called:

$('#target').wrap('<section></section>');

the result would be:

<section>
 <div id="target">
  <div class="demo">Item one</div>
  <div class="demo">Item two</div>
 </div>
</section>

Where things get a little more interesting is if you used a selector that returned multiple items. Imagine the following JavaScript:

$('.demo').wrap('<section></section>');

The result would be:

<div id="target">
 <section>
  <div class="demo">Item one</div>
 </section>
 <section>
  <div class="demo">Item two</div>
 </section>
</div>

Notice that wrap will wrap each element returned by the selector with the new element.

wrapAll

wrapAll behaves differently. Rather than wrapping each returned element, wrapAll wraps all returned content with one new element. As a result, the JavaScript

$('.demo').wrapAll('<section></section>');

would result in

<div id="target">
 <section>
  <div class="demo">Item one</div>
  <div class="demo">Item two</div>
 </section>
</div>

wrapInner

wrapInner is different from both wrap and wrapAll in that wrapInner operates on the children of the target, rather than on the target itself. If you started with the following HTML...

<div id="target">
 <div>Item one</div>
 <div>Item two</div>
</div>

...and executed the JavaScript below...

$('#target').wrapInner('<section></section>');

...the result would be:

<div id="target">
 <section>
  <div>Item one</div>
  <div>Item two</div>
 </section>
</div>

https://codepen.io/GeekTrainer/pen/1ad611909eeab30a35f0ba0b0b44aa07