jQuery 1.4 Animation Techniques - Index of

}),
pointerText = "Use your pointer to scroll, moving to the edge
scrolls faster!",
keyboardMessage = "Use your arrow keys to scroll the images!",
message = $("", {
id: "message",
text: keyboardMessage
});
prox.addClass("slider").wrapInner(scroller).append(message);
var middle = prox.width() / 2;
scroller = $("#scroller");
scroller.width(function() {
var total = 0;
scroller.children().each(function(i, val) {
var el = $(this);
total = total + (el.outerWidth() +
parseInt(el.css("marginLeft")));
});
return total;
}).css("left", "-" + (scroller.width() / 2 - middle) + "px");
[ 211 ]
Chapter 8
What just happened?
First we cache the selector for the proximity container, which we'll use a couple of times
in this chunk of code, and a couple of times a little later on in the script. Next we create a
new element and give it an id attribute so that we can easily select it again when
necessary. We also use this id for styling purposes.
Next we store a couple of text strings in variables for convenience. These will be used
as messages to display to the visitor at different points. We also create a new paragraph
element as a container for the message text, give the element an id (again for selecting
purposes), and use the jQuery text() method to set its innerText to one of the text
strings. Using jQuery 1.4 syntax we can use the property text on the object passed as the
second argument to the element creation jQuery method format, which automatically maps
to the text() method.