jQuery 1.4 Animation Techniques - Index of

Other Popular Animations
Within the function we first create some of the elements that make up our marquee
including the outer container, the heading and two purely aesthetic elements used
to add the left and right fade effect at the start and end of the row of links. All of these
elements are stored in variables so that we can access them easily when required.
Next we process the JSON object passed into the function. Remember, this object contains
a series of properties where the values of some of these properties are arrays, such as the
posts array, which contains each of the returned posts as objects within each of its
array items.
We use a for loop to iterate over each object in the posts array that is returned with the
JSON object. This object contains a property called count, where the number of posts that
are returned is stored as an integer, so we can use this to tell the for loop how many times
to execute, which is marginally easier than counting the objects in the posts array.
For each post that has been returned, we create a new element, setting its href to
point to the url property of the current object, and the title and text of the element set
to the title property of the current object, and then append the new to the marquee
element that we created a minute ago.
Once we've created and appended a link for each post, we then wrap the contents of the
marquee element (the links) in a new , prepend the to the start of the marquee,
and append the elements for the fades to the end of the marquee element. We then
append the marquee to the page before sliding it into view with the slideDown() method.
At this point we need to set a width on the container that we wrapped the links in
a moment ago. This is so that the links can all line up in a single row. We need to take into
account the width of each link, plus any margin it has (which we set in the CSS).
We use a function as the value of jQuery's width() method to iterate over each link and
add its width and margin to a running total. We can't do this until the marquee has been
appended to the page because it is not until this point that each element actually has a
width or margin that we can retrieve.
The last thing we do in the callback function for our getSJON() method is fire off a custom
event with the trigger() jQuery method. The custom event is called marquee-ready
and is used to tell our script when the marquee has been added to the page. We'll use this
custom event shortly to animate the post links.
We also added some new CSS to our stylesheet. Some of this code is to give our marquee
elements the same light skin as the rest of the page. But other parts of it, such as floating the
links, and setting the marquee's overflow property to hidden is so that the links line up in
a single row, and so that the majority of the links are hidden, ready to be scrolled into view.
We also add the fade images to the last two elements inside the marquee element.
[ 226 ]