The Finished Code

This chapter represents just a small fraction of what can be done on the Web with animated image and text rotators. Taken all together, the code for the headline rotator and image carousel looks like this:

$(document).ready(function() {
  //using each as an 'if' and containing stuff inside a private
  //namespace
  $('#news-feed').each(function() {
    var $this = $(this);
    $this.empty();

    var totalHeight = $this.height();
    var fadeHeight = totalHeight / 4;

    for (var i = 0; i < fadeHeight; i+=2) {
      $('<div></div>').css({
        opacity: i / fadeHeight,
        top: totalHeight - fadeHeight + i
      }).addClass('fade-slice').appendTo(this);
    }
    var $newsLoading = $('<img/>')
      .attr({
        'src': '/cookbook/images/loading.gif',
        'alt': 'loading. please wait'}
      )
      .addClass('news-wait');
     $this.ajaxStart(function() {
       $this.append($newsLoading);
     }).ajaxStop(function() {
       $newsLoading...