jQuery 1.4 Animation Techniques - Index of

Time for action – animating the post links
[ 227 ]
Chapter 8
We're now ready to begin scrolling the post links within the marquee. We can do this using
our custom event.
1. After the getJSON() method, add the following code to the page:
$("body").delegate("#marquee", "marquee-ready", function() {
var marquee = $(this),
postLink = marquee.find("a").eq(0);
width = postLink.width() +
parseInt(postLink.css("marginRight")),
time = 15 * width;
postLink.animate({
marginLeft: "-=" + width
}, time, "linear", function() {
$(this).css({
marginLeft: 0
}).appendTo(marquee.find("div").eq(0));
marquee.trigger("marquee-ready");
});
});
2. Our example is now complete. When we run the page at this point, the posts should
begin scrolling from left to right.
What just happened?
We use the jQuery delegate() method to bind an event handler to our custom
marquee-ready event. We need to use event delegation to achieve this because when
this part of the code is executed, the JSON response is unlikely to have returned so the
marquee element won't even exist. Attaching the event handler to the body of the page
is an easy way to prepare the page for when the marquee element does exist.
Within the anonymous event-handling function, we first cache a reference to the marquee
element using the this object, which is scoped to our marquee element. We then select
the first link in the marquee, and determine its total width including margin.
We also work out what is effectively the speed of the animation. jQuery animations use a
duration to determine how quickly an animation should run, but the problem this causes
us is that posts with longer titles will move faster, because they have a greater distance to
animate in the same amount of time.