jQuery 1.4 Animation Techniques - Index of

[ 109 ]
Chapter 5
Although not essential, this is something we will want to use when we come to add a skin to
the widget. We select the right link using an attribute selector that matches the href of the
current link. Note that we don't create any new jQuery objects in this function; we use our
cached container object and the find() method to obtain the elements we require.
Time for action – adding event handlers for the UI elements
Now that the slider has been created, we can add the event handlers that will drive the
functionality:
$("#ui li a").not(prevChild).not(nextChild).click(function(e){
e.preventDefault();
key = $(this).attr("href").split("#")[1];
slide.animate({
left: details[key].position
}, "slow", "easeOutBack", postAnim);
});
nextChild.add(prevChild).click(function(e){
e.preventDefault();
}
});
var arrow = $(this).parent();
if (!slide.is(":animated")) {
slide.animate({
left: (arrow.attr("id") === "prev") ? "+=400" : "-=400"
}, "slow", "easeOutBack", function(){
(arrow.attr("id") === "prev") ? postAnim("back") :
postAnim("forward")
});
What just happened?
The first handler is bound to the main links used to display the different panels, excluding the
previous and next links with the jQuery not() method. We first stop the browser following
the link with the preventDefault() method.
We then update the key variable with the panel that is being displayed by extracting the
panel name from the link's href attribute. We use JavaScript's split() method to obtain
just the panel id and not the # symbol.