JQuery: Novice to Ninja- P6 doc

Licensed to JamesCarlson@aol.com 52 jQuery: Novice to Ninja 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 be camel-cased in order to be used by the animate function; that is to say, you’ll need to write marginLeft, instead of margin-left and back- groundColor instead of background-color. Any property name made up of multiple words needs to be modified in this way. The time span parameter works exactly the same way as the simple animations we saw in Chapter 2: you can pass a number of milliseconds, or one of the strings slow, fast, or normal. Values for CSS properties can be set in pixels, ems, percentages, or points. For example, you could write 100px, 10em, 50%, or 16pt. Even more excitingly, the values you define can be relative to the element’s current values: all you need to do is specify += or -= in front of the value, and that value will be added to or subtracted from the element’s current property. Let’s use this ability to make our navigation menu swing as we pass our mouse over the menu items using the hover function: Licensed to JamesCarlson@aol.com Licensed to JamesCarlson@aol.com Animating, Scrolling, and Resizing 53 chapter_03/02_relative_css_animation/script.js (excerpt) $('#navigation li').hover(function() { $(this).animate({paddingLeft: '+=15px'}, 200); }, function() { $(this).animate({paddingLeft: '-=15px' }, 200); }); Mouse over the navigation menu, and you’ll see the links wobble around nicely. You can also use animate to achieve fine-grained control over the showing, hiding, and toggling functions we saw in Chapter 2. We simply specify a property’s anima- tion value as show, hide, or toggle rather than a numeric amount: chapter_03/03_animate_show_hide (excerpt) $('#disclaimer').animate({ opacity: 'hide', height: 'hide' }, 'slow'); It’s terribly satisfying seeing elements animate. As an exercise, try animating every element property you can think of—you’ll stumble on some interesting effects! The animate function also has some powerful advanced options, which we’ll examine in detail over the course of this chapter. Color Animation Once you realize how cool the animate function is, you’ll probably want to animate an element’s color. However, animating color is a little bit tricky, because the color values “in between” the start and end colors need to be calculated in a special way. Unlike a height or width value that moves from one value to another in a simple, linear manner, jQuery needs to do some extra math to figure out what color is, say, three-quarters of the way between light blue and orange. This color-calculating functionality is omitted from the core library. This makes sense when you think about it: most projects have no need for this functionality, so jQuery can keep the size of the core library to a minimum. If you want to animate color, you’re going to need to download the Color Animations plugin. 1 1 http://plugins.jquery.com/project/color Licensed to JamesCarlson@aol.com Licensed to JamesCarlson@aol.com 54 jQuery: Novice to Ninja Using Plugins The official jQuery plugin repository 2 contains an ever-increasing number of plugins—some more useful than others. You can search for plugins by name, category (such as effects or utilities), or by the rating it’s received from the jQuery community. Once you’ve found a plugin you’re interested in, download it to a suitable location for your project (most likely the same place as your jQuery source file). It’s a good idea to peruse the readme file or related documentation before you use a plugin, but generally all you need to do is include it in your HTML files, in much the same way as we’ve been including our custom JavaScript file. How you make use of your newfound functionality varies from plugin to plugin, so you’ll have to consult each plugin’s documentation to put it to the best use. After downloading and including the Color Animations plugin, you can now animate color properties in your jQuery animation code, just as you would other CSS prop- erties. Let’s gradually highlight our disclaimer message over a period of two seconds as the page loads, to make sure no one misses it: chapter_03/04_color_animation (excerpt) $('#disclaimer').animate({'backgroundColor':'#ff9f5f'}, 2000); See how animating the disclaimer makes it so much more noticeable? Easing Easing refers to the acceleration and deceleration that occurs during an animation to give it a more natural feel. Easing applies a mathematical algorithm to alter the speed of an animation as it progresses. Thankfully, we’re using jQuery, so you can leave your high school math skills safely locked away. There are two types of easing available to use in jQuery: linear and swing. Any time you use an animation function in jQuery, you can specify either of these parameters to control the animation’s easing. The difference between them can be 2 http://plugins.jquery.com/ Licensed to JamesCarlson@aol.com Licensed to JamesCarlson@aol.com Animating, Scrolling, and Resizing 55 seen in Figure 3.1, which shows how a property is adjusted over the period of an animation depending on which easing option you select. Figure 3.1. jQuery’s easing options swing easing starts off slowly before gaining speed, then towards the end of the animation it slows down again, nice and gently. Visually, swing easing looks far more natural than linear easing, and jQuery uses it by default if no easing parameter is specified. The linear easing method has no acceleration or deceleration: animations occur at a constant rate. It looks fairly boring and a bit rigid in most circumstances, but it’s worth giving it a try—it might just be appropriate for your purposes. As an example, we’ll animate the first paragraph tag so that when clicked, it grows and shrinks; we’ll use linear easing as it grows, and swing easing as it shrinks. The difference is quite subtle, but if you repeat the animations a few times you should be able to distinguish between them; the shrinking animation feels a little bit more natural: chapter_03/05_easing/script.js (excerpt) $('p:first').toggle(function() { $(this).animate({'height':'+=150px'}, 1000, 'linear'); }, function() { $(this).animate({'height':'-=150px'}, 1000, 'swing'); }); There’s quite a lot of jQuery in this statement, so now might be a good time to pause and make sure you understand everything that’s going on here: Licensed to JamesCarlson@aol.com Licensed to JamesCarlson@aol.com 56 jQuery: Novice to Ninja ■ We use a filter with a selector to grab only the first paragraph tag. ■ A toggle event handler (which executes each passed function on successive clicks) is attached to the paragraph. ■ Inside the handlers we select this, which refers to the element that triggered the event (in our example, it’s the paragraph itself). ■ The first handler uses the += format to grow the paragraph’s height by 300 pixels, using the linear easing function. ■ The second handler uses the -= format to shrink the paragraph’s height by 300 pixels, using the swing easing function. If you managed to follow along and understand each of these steps, pat yourself on the back! You’re really getting the hang of jQuery! Advanced Easing As stated, swing easing provides a much more visually pleasing transition, and is probably adequate for most tasks. But swing and linear easing are just the tip of the iceberg. There is a vast array of easing options beyond these two basic types included in the core jQuery library. Most of these are available in the easing plugin, 3 available from the jQuery plugin repository. jQuery UI Includes Several Plugins The easing library is also included in the effects section of the jQuery UI library, which we’ll be visiting shortly. If you’re starting to suffer from plugin fatigue, then you might like to skip forward to the section called “The jQuery User Interface Library”—this library includes several common plugins, including color animation, class transitions, and easing. By including the jQuery UI library, you ’ll avoid needing to include each plugin separately in your pages. Just download and include the plugin’s JavaScript file in your HTML page, anywhere after the jQuery library. Rather than providing you with new functions, the easing plugin simply gives you access to over 30 new easing options. Explaining what all of these easing functions do would test even the most imaginative writer, so we’ll 3 http://plugins.jquery.com/project/Easing Licensed to JamesCarlson@aol.com Licensed to JamesCarlson@aol.com Animating, Scrolling, and Resizing 57 simply direct your attention to Figure 3.2, where you can see a few of the algorithms represented graphically. You’ll notice that some of the algorithms move out of the graph area; when animated elements reach this part of the transition, they’ll move past their destination and finally turn back 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. 4 4 http://www.robertpenner.com/easing/ Licensed to JamesCarlson@aol.com Licensed to JamesCarlson@aol.com 58 jQuery: Novice to Ninja 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. 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 Licensed to JamesCarlson@aol.com Licensed to JamesCarlson@aol.com Animating, Scrolling, and Resizing 59 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) <div id="bio"> <h2>Who’s Hot Right Now?</h2> <h3>Beau Dandy</h3> <div> <img src=" /images/beau_100.jpg" width="100" height="100" alt="Beau Dandy"/> <p>Content about Beau Dandy</p> </div> <h3>Johnny Stardust</h3> <div> <img src=" /images/johnny_100.jpg" width="100" height="100" alt="Johny Stardust"/> <p>Content about Johny Stardust</p> </div> <h3>Glendatronix</h3> <div> <img src=" /images/glenda_100.jpg" width="100" height="100" alt="Glendatronix"/> <p>Content about Glendatronix</p> </div> </div> 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. “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. Licensed to JamesCarlson@aol.com Licensed to JamesCarlson@aol.com 60 jQuery: Novice to Ninja 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 “hidden” in the panes, and that they’re meant to click on the headings to reveal it. Making this work in jQuery is simple: we merely apply the :first filter and call the show action to reveal only the first pane: $('#bio > div:first').show(); 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 se- lector 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 docu- mentation. 5 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: 5 http://docs.jquery.com/Selectors/child Licensed to JamesCarlson@aol.com Licensed to JamesCarlson@aol.com Animating, Scrolling, and Resizing 61 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 } ); Licensed to JamesCarlson@aol.com [...]... properties: left and top; these are the left and top offsets of the selected element relative to its parent In this case we want the left property, so we know where to move the blob to in our navigation menu Licensed to JamesCarlson@aol.com Licensed to JamesCarlson@aol.com $('#navigation a').hover(function() { // Mouse over function ⋮ }, function() { // Mouse out function ⋮ }); 66 jQuery: Novice to Ninja We... elements as we go along, only applying actions to the current selection 64 jQuery: Novice to Ninja 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... 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 an... animate actions together: the first one hides the blob with a bit of nice easing applied, and the second whisks it off to the side (to the position of the first link in the navigation) You might notice that there’s an extra action chained into our animation, the stop action stop does exactly what you’d expect—it stops the animation! It accepts two optional parameters: clearQueue and gotoEnd We’re setting... Ninja We set the queue option to false to ensure that our animations won’t pile up in a line waiting to execute if our user is hover-happy When you move to a different link, a new animation will start regardless of whether the current one is finished or not We still need to tell jQuery what to do when our user moves the mouse off the link This block of code is fairly similar to the one we just saw, although...62 jQuery: Novice to Ninja 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... $(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... 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 Licensed to JamesCarlson@aol.com Licensed to JamesCarlson@aol.com It’s important to realize that the jQuery selector contains the modified... append it to the previous action For example, let’s chain together the hide, slideDown, and fadeOut actions Our element quickly hides and then slides into view, before fading away: $('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 Licensed to JamesCarlson@aol.com... clearQueue and gotoEnd We’re setting the clearQueue para­ meter to true, so that any queued animations are cleared The gotoEnd parameter is used if you want jQuery to determine what an element’s state will be at the end of the current animation queue, and then jump immediately to that state We don’t want to use that here, as we want our animations to start from the blob’s current position—even if it’s only . Licensed to JamesCarlson@aol.com Licensed to JamesCarlson@aol.com 66 jQuery: Novice to Ninja We set the queue option to false to ensure that our animations won’t pile up in a line waiting to execute. JamesCarlson@aol.com Licensed to JamesCarlson@aol.com 60 jQuery: Novice to Ninja We want to avoid showing any content when the page loads, so the first thing to do is to hide all of the content. way to control your animations more precisely. Licensed to JamesCarlson@aol.com Licensed to JamesCarlson@aol.com 64 jQuery: Novice to Ninja Animated Navigation The client is sticking to