jQuery 1.4 Animation Techniques Beginner's Guide

Time for action – animating the post links

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 ...