JQuery_ Novice to Ninja - Earle Castledine [24]
If we look at our modified DOM shown in Figure 2.7, we can see that the spoiler span is the next element after the revealer button. The next action simply moves our selection to that element. jQuery also gives us access to a previous action that moves the selection to the element before the one that’s currently selected.
Figure 2.7. The modified DOM
In fact, jQuery has about a dozen different actions you can use to move around the DOM; previous and next are just two particularly useful ones. We’ll discover more of them as we proceed through the book, or you can consult the jQuery API documentation to see them all.
With the hidden spoiler element now under jQuery’s control, we can simply call fadeIn to reveal the spoiler with a smooth transition.
Before We Move On
We’ve covered so much in the initial chapters that you should now be gaining a sense of jQuery’s structure and power. With any luck, you’ve already hatched plans for using it in your current projects. Please do! Whether you’re using it to solve a pernicious problem or just to add a bell here and a whistle there, dirtying your hands is by far the best way to cement your knowledge.
One small word of warning—remember the old saying: “When the only tool you have is a hammer, everything looks like a nail.” jQuery is a great tool, but may be inappropriate in some instances. If a problem is better solved with simple changes to your CSS or HTML, that’s what should be done. Of course, while you’re learning, feel free to do everything with jQuery; just remember that when the time comes to put your skills into practice, you should always use the best tool for the job.
In the pages that follow, we’ll take the simple jQuery building blocks we’ve learned here and use them to construct some very cool widgets, effects, and user interaction that you can start using immediately.
Chapter 3
Animating, Scrolling, and Resizing
The client is extremely happy with our rapid and inspired first-round changes and wants to take it further. His company deals with the entertainment industry, and he believes that the web site should reflect what he perceives as the exciting and dynamic nature intrinsic to the business. Also, he believes flashy animations will help boost sales.
“I think it needs some of that Web 2.0 that I’ve been hearing about,” he says confidently. “Can you make it look more like a Web 2.0?”
“Errrm, indeed we can,” you assure him, as he passes you his next wish list chock-full of exciting changes—a list that will allow us to move beyond simply hiding and showing, and closer to our goal of being a jQuery ninja.
Animating
jQuery was built to animate. Whether it’s fading out a warning message after a failed login, sliding down a menu control, or even powering a complete side-scrolling, “shoot ’em up” game—it’s all a snap with some powerful built-in methods, augmented with an extensive array of plugins.
Animating CSS Properties
We have mastered some valuable examples of animation so far—sliding, fading, and some fancy hiding and showing—but we haven’t had a lot of control over what exactly is animated and exactly how it happens. It’s time to introduce a very exciting jQuery function, helpfully called animate, which lets you animate a whole host of CSS properties to fashion some striking effects of your own. Let’s have a look at an example of animate in action:
chapter_03/01_animating_css/script.js (excerpt)
$('p').animate({
padding: '20px',
borderBottom: '3px solid #8f8f8f',
borderRight: '3px solid #bfbfbf'
}, 2000);
This code will animate all paragraphs on the page, changing the padding from its initial state to 20px and adding a beveled border over a period of 2 seconds (2,000 milliseconds).
To use animate, we pass an object literal containing the properties we would like to animate specified as key/value pairs—much the same as when you assign multiple properties with the css function. There’s one caveat that you’ll need to remember: property names must