JQuery 基础教程 ----之图像翻转

JQuery 基础教程 ----之图像翻转

  1/**//***************************************
  2   =NEWS FEED ROTATOR
  3-------------------------------------- */
  4
  5$(document).ready(function() {
  6  // Using each as an 'if' and containing stuff inside a private namespace.
  7  $('#news-feed').each(function() {
  8    var $this = $(this);
  9    $this.empty();
 10
 11    var totalHeight = $this.height();
 12    var fadeHeight = totalHeight / 4;
 13
 14    for (var i = 0; i < fadeHeight; i+=2) {
 15      $('<div></div>').css({
 16        opacity: i / fadeHeight,
 17        top: totalHeight - fadeHeight + i
 18      }).addClass('fade-slice').appendTo(this);
 19    }
 20    var $newsLoading = $('<img/>')
 21      .attr({
 22        'src': '/cookbook/images/loading.gif',
 23        'alt': 'loading. please wait'}
 24      )
 25      .addClass('news-wait');
 26    $this.ajaxStart(function() {
 27      $this.append($newsLoading);
 28    }).ajaxStop(function() {
 29      $newsLoading.remove();
 30    });
 31
 32    // Retrieve the news feed.
 33    $.get('news/feed.php', function(data) {
 34      $('/rss//item', data).each(function() {
 35        var title = $('title', this).text();
 36        var linkText = $('link', this).text();
 37        var $link = $('<a></a>').attr('href', linkText).text(title);
 38        $link = $('<h3></h3>').html($link);
 39        
 40        var pubDate = new Date($('pubDate', this).text());
 41        var pubMonth = pubDate.getMonth() + 1;
 42        var pubDay = pubDate.getDate();
 43        var pubYear = pubDate.getFullYear();
 44        var $pubDiv = $('<div></div>')
 45          .addClass('publication-date')
 46          .text(pubMonth + '/' + pubDay + '/' + pubYear);
 47
 48        var summaryText = $('description', this).text();
 49        // adding this one line to replace ugly bracketed ellipses
 50        summaryText = summaryText.slice(0,summaryText.indexOf(' []')) + ' &hellip;';
 51        var $summary = $('<div></div>')
 52          .addClass('summary')
 53          .html(summaryText);
 54
 55        $('<div></div>')
 56          .addClass('headline')
 57          .append($link)
 58          .append($pubDiv)
 59          .append($summary)
 60          .appendTo('#news-feed');
 61      });
 62
 63      // Set up the rotator.
 64      var currentHeadline = 0, oldHeadline = 0;
 65      var hiddenPosition = totalHeight   + 10;
 66      $('div.headline:eq(' + currentHeadline + ')').css('top','0');
 67      var headlineCount = $('div.headline').length;
 68      var headlineTimeout;
 69      var rotateInProgress = false;
 70
 71      // Rotator function.
 72      var headlineRotate = function() {
 73       if (!rotateInProgress) {
 74          rotateInProgress = true;
 75          headlineTimeout = false;
 76
 77          currentHeadline = (oldHeadline + 1) % headlineCount;
 78          $('div.headline:eq(' + oldHeadline + ')')
 79          .animate({top: -hiddenPosition}, 'slow', function() {
 80            $(this).css('top',hiddenPosition);
 81          });
 82          $('div.headline:eq(' + currentHeadline + ')')
 83          .animate({top: 0},'slow', function() {
 84            rotateInProgress = false;
 85            if (!headlineTimeout) {
 86              headlineTimeout = setTimeout(headlineRotate, 5000);
 87            }
 88          });
 89          oldHeadline = currentHeadline;
 90        }
 91      };
 92      headlineTimeout = setTimeout(headlineRotate,5000);
 93
 94      // On hover, clear the timeout and reset headlineTimeout to 0.
 95      $('#news-feed').hover(function() {
 96        clearTimeout(headlineTimeout);
 97        headlineTimeout = false;
 98      }, function() {
 99        // Start the rotation soon when the mouse leaves.
         if (!headlineTimeout) {
           headlineTimeout = setTimeout(headlineRotate, 250);
         }
      }); //end .hover()
    }); // end $.get()
  }); //end .each() for #news-feed
});

 

each的使用 取余 rotateInProgress = true; 动画执行间调用那个函数不起作用，鼠标离开后继续执行！ headlineTimeout = false; 一个函数 将其先赋值 然后执行后赋值 ！！ 没达到时间将赋值 false,而不执行！然后执行下一次调用函数