• Choose a category
• All
• Classic-Fiction

By Root 1150 0

to settle there. The effect is that of an element attached to a piece of elastic, which gently pulls everything back into place.

Figure 3.2. Advanced easing options

To use one of the new algorithms, we just need to pass its name to our animate function. There are lots to choose from, so we might as well jump straight into it and try a few different ones:

chapter_03/06_other_easing_options/script.js (excerpt)

$('p:first').animate({height: '+=300px'}, 2000, 'easeOutBounce');

$('p:first').animate({height: '-=300px'}, 2000, 'easeInOutExpo');

$('p:first').animate({height: 'hide'}, 2000, 'easeOutCirc');

$('p:first').animate({height: 'show'}, 2000, 'easeOutElastic');

Look at that paragraph go! You might want to know where these easing option names are coming from—or where you can see the full list. The algorithms originated from Robert Penner’s easing equations, which are described in detail on his web site.

The best way to see all the available equations is to view the plugin’s source code. If you use your text editor to open up the file you downloaded, you’ll see a list of the functions you can use in jQuery animations.

Tip: Time to Play Around

Take a break and test out all of the easing functions that the plugin makes available. It’s unlikely you’ll ever need to use all of them, but becoming familiar with them will let you choose the right one to give your interface the precise feel you want. Moreover, playing around with the animate function will cement your knowledge of it: it’s an important part of a jQuery ninja’s arsenal!

Bouncy Content Panes

Now that we’ve learned a bit about how the animate function works, let’s have a look at our client’s latest round of requests. Today’s to-do list includes the addition of a vitally important page component: the StarTrackr! Daily “Who’s Hot Right Now?” List (or the SDWHRNL for short). The list consists of the latest celebrities to fall in or out of favor, along with an accompanying photo and brief bio. We’ll apply some of the animation and easing techniques we’ve just learned to implement the list as panes that can be opened and closed independently.

The appearance of the widget in the page is shown in Figure 3.3.

Figure 3.3. Biography panes

In our HTML, we’ll implement the section as a div element containing all of our celebrities. Each celebrity’s pane will be marked up as an h3, followed by another div containing an image and a short paragraph:

chapter_03/07_bouncy_content_panes/index.html (excerpt)

When a user clicks on one of the headings, we want the associated content pane to toggle open and closed. You can style your panes however you see fit, but having a block-level element for a heading with a different-colored background is a common technique: it provides a clear call to action for the user to click on it.

Tip: “Jumpy” Animation?

One quirk to be aware of is that animating an element directly next to a heading tag can sometimes look “jumpy”—especially when the element hides. This is due to the heading’s margin, which collapses as the following element hides. A simple workaround, which we’ve used here, is to remove margins from the heading tag entirely.

We want to avoid showing any content when the page loads, so the first thing to do is to hide all of the content containers:

chapter_03/07_bouncy_content_panes/script.js (excerpt)

$('#bio > div').hide();

If, instead, you’d prefer to have one pane open by default, you could specify it here. This can help to make it more evident to users that there’s content