JQuery_ Novice to Ninja - Earle Castledine [22]
Toggling Effects and Animations
Although jQuery has no specific action for toggling using fades, here’s a little secret: our original toggle action has a few more tricks up its sleeve than we first thought. If we pass it a time span parameter, we’ll see that toggle has the ability to animate:
chapter_02/26_toggle_fade/script.js (excerpt)
$('#toggleButton').click(function() {
$('#disclaimer').toggle('slow');
});
You can see that the width, height, and opacity of the entire element are animated. If this is a bit much for you, there’s another core jQuery animation effect that does include built-in toggle actions: sliding.
Sliding eases an element into and out of view, as if it were sliding out from a hidden compartment. It’s implemented in the same manner as our fade, but with the slideDown, slideUp, and slideToggle actions. As with the fade effect, we can also specify a time span:
chapter_02/27_slide_toggle/script.js (excerpt)
$('#toggleButton').click(function() {
$('#disclaimer').slideToggle('slow');
});
Callback Functions
Many effects (including our slide and fade effects) accept a special parameter known as a callback function. Callbacks specify code that needs to run after the effect has finished doing whatever it needs to do. In our case, when the slide has finished sliding it will run our callback code:
chapter_02/28_callback_functions/script.js (excerpt)
$('#disclaimer').slideToggle('slow', function() {
alert('The slide has finished sliding!')
});
The callback function is simply passed in as a second parameter to the effect action, as an anonymous function, much in the same way we provide functions as parameters to event handlers.
Important: Anonymous Functions
In JavaScript, functions that are defined inline (such as our callbacks and event handlers) are called anonymous functions. They are referred to as “anonymous” simply because they don’t have a name! You use anonymous functions when you only require the function to be run from one particular location.
In any situation where we’re using anonymous functions, it’s also possible to pass a function name yet define the function elsewhere. This is best done when the same function needs to be called in several different places. In simple cases like our examples, this can make the code a bit harder to follow, so we’ll stick with anonymous functions for the moment.
Let’s put our callback functions to practical use. If we want to hide our button after the disclaimer has finished sliding out of view:
chapter_02/29_callback_functions_2/script.js (excerpt)
$('#disclaimer').slideUp('slow', function() {
$('#hideButton').fadeOut();
});
The disclaimer will slide up, and only once that animation is complete will the button fade from view.
A Few Tricks
Now that we’ve struck a few high priority requests off the client’s to-do list, let’s be a bit more showy and add some extra sizzle to the site. We’ll add a few effects and visual highlights by building on what we’ve learned so far. There’ll be some new constructs and actions introduced, so it’s worth working through them if this is your first venture into the world of jQuery.
Highlighting When Hovering
The client is really keen about the zebra-striping usability issue. He’s requested that, as well as changing the row colors, there should be an additional highlight that occurs when the user runs the mouse over the table.
We could implement this effect by adding event handlers to the table that deal with both the mouseover and mouseout events. Then we could add or remove a CSS class containing a background color specific to elements over which the mouse is hovering. This is much the same way we’d do it in plain old JavaScript too:
chapter_02/30_hover_highlight/script.css (excerpt)
$('#celebs tr').mouseover(function() {
$(this).addClass('zebraHover');
});
$('#celebs tr').mouseout(function() {
$(this).removeClass('zebraHover');
});
Remember that $(this) refers to the selected object—so we’re adding and removing