• Choose a category
• All
• Classic-Fiction

By Root 1089 0

blob in place, we need to set up a trigger that will set it in motion. This should occur when the user hovers over one of the navigation links, so we’ll use the hover function. Remember that hover accepts two parameters: the function that runs when the mouse moves over the element, and the one that runs when the mouse moves off the element. This is the general outline of our event handler:

chapter_03/09_animated_navigation/script.js (excerpt)

$('#navigation a').hover(function() {

// Mouse over function

…

}, function() {

// Mouse out function

…

});

Now for some fun stuff. Let’s look at the first function, which occurs when the mouse moves over the element:

chapter_03/09_animated_navigation/script.js (excerpt)

// Mouse over function

$('#navigation_blob').animate(

{width: $(this).width() + 10, left: $(this).position().left},

{duration: 'slow', easing: 'easeOutElastic', queue: false}

);

When the user mouses over the menu item, we animate two properties of the blob: its width and its position.

The link’s position on the page can be determined using a jQuery method called position. This is an action that does nothing on its own, but when called exposes two 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.

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 it includes a few more chained actions:

chapter_03/09_animated_navigation/script.js (excerpt)

// Mouse out function

$('#navigation_blob')

.stop(true)

.animate(

{width: 'hide'},

{duration: 'slow', easing: 'easeOutCirc', queue: false}

)

.animate(

{left: $('#navigation li:first a').position().left;},

'fast'

);

}

This time we’ve chained two 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 the clearQueue parameter 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 halfway through moving.

Give the menu a spin in your browser, and see how the appropriate use of easing has given our control a natural feel.

Now’s a great time to try some different easing functions. Just replace the ones used here with any of the others from the easing plugin—you’ll be amazed at how much difference they make to the feel of the component. You can also try animating other values: changing the blob’s color, for instance.

Animated Navigation, Take 2

One of the great advantages to using a library such as jQuery is that you can try out a bunch of different alternatives fairly quickly, and pick the one you like best.

We still have a few hours left before our client will want to see the progress of our animated navigation. Let’s try to approach the same problem from a different angle and see what we can come up with.

For this animation, our menu items will each have a hidden icon that will bounce into view when the link is moused over (as shown in Figure 3.4).

Figure 3.4. Bouncy animated menu

The setup for this effect is nice and simple. It’s a regular unordered list, configured as a horizontal menu—but we’ve