动画效果

　　代码如下：

var TWO_SECONDS = 2000;
...
function animate(pArr,animationTarget,handle)...{
   var len = pArr.length;
   var currInd = 1;
   animationTarget.doTimeout(handle,TWO_SECONDS, function()...{
      this.fadeOut(function()...{
         currInd = currInd % len;
         animationTarget.text(pArr[currInd++]);
         animationTarget.fadeIn();
      });
      return true;
   });
}

 　　在显示动画的方法中，pArr参数是传入的新闻列表，animationTarget是最新新闻要显示的位置区域。而通过使用jquery-dotimeout-plugin这个插件去实现最新新闻的淡入淡出显示，这个插件的效果有点象Javascript中的setTimeout()方法。这里我们定义了每隔2秒，就显示新闻列表数组pArr中的内容。

　　而这个动画效果会持续运行下去，但持续到什么时候结束呢?将会知道执行$.doTimeout(…,false)时才结束。还记得在populateSingleNews方法中，在删除新闻分类时，有一行$.doTimeout(categoryLi, false)么?这里实际上就是说在删除新闻分类前，先停止动画效果的更新。

　　查看新闻详细页的编写

　　现在我们来看下，当用户点某个新闻分类标题后，将会跳转到列出该分类下的新闻列表这个功能如何实现，为方便起见，先以如下的RSS XML为例子进行说明：

<rss>
  <channel>
    ...
    <category>business</category>
    <description>Business News</description>
    ...
    <item>
      ...
      <title>Retirement Looms: Time to Get Nervous (BusinessWeek)</title>
      ...
      <description>Let the retirement parties begin: The oldest members of the 1946-64 demographic
         wave known as the Baby Boom turn 65 this month.</description>
    </item>
    ...
  </channel>
</rss>

 　　下面看下populateNewsItems()的编写：

var EMPTY = '';
var ITEM = 'item';
var DESCR = 'description';
...
var HTML_FRG7 = '<p>';
var HTML_FRG8 = '</p><hr></hr>';
...
var contentNewsVar = $('#contentNews');
...
function populateNewsItems(xml)...{
   var tmpTxt = EMPTY;
   $(xml).find(ITEM).each(function()...{
      var txt = $(this).find(DESCR).text();
      tmpTxt = tmpTxt + HTML_FRG7 + txt + HTML_FRG8;
   });

   contentNewsVar.html(tmpTxt);
   showNews();
}

　　我们通过jQuery的find()和each()解析XML,对于每个item元素，取出其新闻的详细内容即description子元素内容放到变量txt中去，最后用<p></p>将其包裹起来，并最后加上一个水平线作为分隔。

　　最后通过jQuery的html()方法将<div id="contentNews">的值设置为tmpTxt,记得<div id="contentNews">就是新闻内容的区域。