JQuery_ Novice to Ninja - Earle Castledine [29]
$('p:first').hide().slideDown('slow').fadeOut();
You can chain together as many actions as you like. Be careful though: chaining can quickly become addictive! As well as being able to chain actions based on your initial selector, you can also move around the DOM, adding and removing elements as you go—which can lead to some quite hairy statements.
It’s often good to lay out your actions on separate lines for clarity. This takes up a lot more space, but is much easier to read and maintain. Our previous example could be rewritten like this:
$('p:first')
.hide()
.slideDown('slow')
.fadeOut();
It’s important to realize that the jQuery selector contains the modified results of each action that runs before running the next action. This means that we can add and remove elements as we go along, only applying actions to the current selection.
If you revisit a few of our earlier examples, you might spot a few chained actions hidden in the code—for example, when we wrote: $(this).next().toggle(). The next action moved our selection to the next DOM element, and then the toggle action toggled it without affecting the original element.
You’ll have plenty of chances from now on to play with chaining; the rest of this book is going to be filled with it. It’s the most fun part of jQuery!
Pausing the Chain
If you’d like to pause briefly in the middle of a jQuery chain, you can use the delay action. Simply give it a number, and it will hold the chain for that many milliseconds before continuing. So, referring to the same example, we could write:
$('p:first')
.hide()
.slideDown('slow')
.delay(2000)
.fadeOut();
This code will slide down the paragraph, and then wait two seconds before fading it out. This can be a great way to control your animations more precisely.
Animated Navigation
The client is sticking to his guns on this issue: he wants the top-level navigation to be a Flash control that wobbles and zooms around as the user interacts with it. Flash, he explains, looks better. You assure him your Flash skills are second to none, and that you’ll whip up a proof of concept for him right away.
Okay. Now, with the client out of the room, let’s apply our newly discovered jQuery power to create a Flash-like navigation bar. It will have a background “blob” that wobbles around to highlight the menu choice the user is hovering over. And we’ll do it all with free, standard technologies: HTML, CSS, and JavaScript. Flash? We don’t need no stinkin’ Flash!
We’re sticking with a fairly basic animation so that the steps are easier to follow. First off, we’ve modified the CSS pertaining to our navigation menu so that it’s laid out horizontally rather than vertically. As a refresher, here’s what the HTML for the navigation looks like:
chapter_03/09_animated_navigation/index.html (excerpt)
Our background color blob will be an empty div element, positioned behind whichever navigation link the user is mousing over. Our first task, therefore, will be to create the element and append it to the document:
chapter_03/09_animated_navigation/script.js (excerpt)
$('
').css({width: $('#navigation li:first a').width() + 10,
height: $('#navigation li:first a').height() + 10
}).appendTo('#navigation');
Notice that we’re selecting the navigation link inside the object literal to provide values for the width and height. This may seem strange if you’re new to programming, but you shouldn’t let it frighten you—in general, you can use the returned (or calculated) value of a function anywhere you can put a static value. We’re also adding 10 to each of those values, so that the blob is slightly larger than the anchor tag it will sit behind.
With the