JQuery: Novice to Ninja- P6 doc

The animate function also has some powerful advanced options, which we’ll examine in detail over the course of this chapter.. After downloading and including the Color Animations plugin,

Licensed to JamesCarlson@aol.com

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

CSS properties to fashion some striking effects of your own Let’s have a look at an

chapter_03/01_animating_css/script.js (excerpt)

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 animate specified as key/value pairs—much the same as when you assign multiple

property names must be camel-cased in order to be used by the animate function;

groundColorinstead 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

Even more excitingly, the values you define can be relative to the element’s current

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

Licensed to JamesCarlson@aol.com

chapter_03/02_relative_css_animation/script.js (excerpt)

Mouse over the navigation menu, and you’ll see the links wobble around nicely

and toggling functions we saw in Chapter 2 We simply specify a property’s anima­

chapter_03/03_animate_show_hide (excerpt)

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

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

1 http://plugins.jquery.com/project/color

Licensed to JamesCarlson@aol.com

Using Plugins

The official jQuery plugin repository2 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)

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

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

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)

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

clicks) is attached to the paragraph

the event (in our example, it’s the paragraph itself)

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

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

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

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)

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

Licensed to JamesCarlson@aol.com

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

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

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

“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

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)

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

reveal only the first pane:

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

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

chapter_03/example_07/script.js (excerpt)

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

options, like this:

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

chapter_03/08_animation_queue/script.js (excerpt)

Licensed to JamesCarlson@aol.com

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

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

tions 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

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 action

you simply 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:

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

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:

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

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

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:

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