JQuery_ Novice to Ninja - Earle Castledine [28]
$('#bio > div:first').show();
Important: The Child Selector
There’s a new selector feature in these examples that we’ve yet to cover. It’s the child selector, and it’s indicated by the greater-than angle bracket (>). A child selector selects all the immediate children that match the selector. If we’d omitted the child selector, our code would select all div elements underneath the bio div element, even if they were nested inside other elements. For more details and code examples using this selector, feel free to look it up in the jQuery API documentation.
Now that our content is marked up the way we want it, we simply need to add some jQuery interaction magic to it. To reveal our secret content we’ll take the familiar approach of capturing the click event, finding the next element (which contains our content), and showing it—as we did in Chapter 2. But this time, we’ll employ a touch of “bounce,” easing to the content’s height so that the panes bounce in and out of view:
chapter_03/example_07/script.js (excerpt)
$('#bio h3').click(function() {
$(this).next().animate(
{'height':'toggle'}, 'slow', 'easeOutBounce'
);
});
The easing function easeOutBounce produces a great bouncing ball effect, which works wonderfully for content panes like this. Give it a spin in your browser and see for yourself!
The Animation Queue
The last topic we’re going to look at with regards to animation is another advanced use of the animate function. It turns out animate can be called with a set of extra options, like this:
animate(parameters, options);
The options parameter is a bundle of options packaged together as an object literal made up of key/value pairs. We’re already familiar with several of the available options: duration, easing, and complete (the callback method). There are, however, a couple of new ones: step and queue. Before we explain them, let’s take a look at the syntax for calling the animate function with an options parameter:
chapter_03/08_animation_queue/script.js (excerpt)
$('p:first').animate(
{
height: '+=100px',
backgroundColor: 'green'
},
{
duration: 'slow',
easing: 'swing',
complete: function() {alert('done!');},
queue: false
}
);
Notice that you can accomplish almost all of this with the simpler format that we’ve already seen. You only need the advanced version if you want to specify additional settings, like the queue parameter.
The queue is the list of animations waiting to occur on a particular element. Every time we ask jQuery to perform an animation on an element, that animation is added to the queue. The element executes the queue one at a time until everything is complete. You’ve probably already seen this if you’ve gone click-happy on one of our demos.
There are many situations where this will be undesirable though. Sometimes you’ll want multiple animations to occur at the same time. If you disable the queue when you specify an animation, further animations can run in parallel.
The animation queue can be controlled by using the queue option, as well as with the jQuery actions stop, queue, and dequeue. This combination of actions and options gives us super-fine control over how our animations run. But before we can really sink our teeth into these juicy options, it’s time to unveil one of the most important jQuery techniques around.
Chaining Actions
So far we’ve been writing statements one at a time—either one after the other, or nested inside callback functions. We’ve needed to either rewrite our selectors, or make use of the this keyword to find our targets again. However, there’s a technique that allows us to run multiple jQuery commands, one after the other, on the same element(s). We call this chaining—and to release the ninja inside of you, you’d better pay attention to this bit.
Chaining links two or more jQuery actions into a single statement. To chain