Question

我有一个XML文件，我需要用jQuery读取，然后将其解析为一个列表，我读过的每个新项目都应该在顶部显示fadeIn，所有其他项目应该是动画下来的。喜欢http://medihack.github.com/fiji/demos/ticker/ticker.html

我有那个我将检索数据的XML文件

XML：

<?xml version="1.0" encoding="utf-8" ?>
   <RecentTutorials>
      <Tutorial author="The Reddest">
         <Title>Silverlight and the Netflix API</Title>
         <Date>1/13/2009</Date>
      </Tutorial>
      <Tutorial author="The Hairiest">
         <Title>Cake PHP 4 - Saving and Validating Data</Title>
         <Date>1/12/2009</Date>
      </Tutorial>
      <Tutorial author="The Tallest">
         <Title>Silverlight 2 - Using initParams</Title>
         <Date>1/6/2009</Date>
      </Tutorial>
      <Tutorial author="The Fattest">
         <Title>Controlling iTunes with AutoHotkey</Title>
         <Date>12/12/2008</Date>
      </Tutorial>
   </RecentTutorials>

我有代码jQuery和样式

CSS：

#output {
   width: 400px;
   height: 140px;
   margin: 0 auto;
   overflow: hidden;
   border-color: #000000;
   background-color: #C0C0C0;
   border-style: solid;
   border-width: 2px;
}
ul {
   list-style: none;
}
li {
   float: left;
   width: 270px;
   height: 20px;
   top:-10px;
   position:relative;
   overflow: hidden;
   background-color: #999999;
   border-color: blue;
   border-style: solid;
   border-width: 1px;
}

JS：

$(document).ready(function() {
   $.ajax({
      type : "GET",
      url : "jquery_slashxml.xml",
      dataType : "xml",
      success : parseXml2
   });
});

function parseXml2(xml) {
   //print the date followed by the title of each tutorial
   var arr = [];
   $(xml).find("Tutorial").each(function(idx, v) {
      arr[idx] = [];
      $(v).find("Title").each(function(i, vi) {
         arr[idx].push($(vi).text());
      });
      $(v).find("Date").each(function(i, vi) {
         arr[idx].push($(vi).text());
      });
   });
   //console.log(arr.length);
   //$("#output ul").append("<li>" + arr[0][0] + "</li><li>" + arr[0][1] + "</li>" );
   var i = 0;
   var t = setInterval(function() {
      if (i >= arr.length) {
         //clearInterval(t);
         i = 0;
      }
      $('#output ul').prepend("<li>" + arr[i][0] + "-" + arr[i][1] + "</li>").children(':first').hide().fadeIn(2000);   
      //$('#output ul li').animate({"marginTop": "+=5px"}, "2000");
      //  $('#output ul li').animate({ top: '+=22px' }, 2000);
      // $('#output ul').prepend("<li>" + arr[i][0] + "-" + arr[i][1] + "</li>").children(':first').hide().slideDown(2000);
      //$('#output ul li').prev().animate({ top: '+=22px' }, 1000);
      //$("#output ul li:not(" + i + ")").animate("2000");
      //$("#output ul:first-child").prepend("<li>" + arr[i][0] + "</li><li>" + arr[i][1] + "</li>" ).hide().fadeIn(1000);
      i++;
   }, 4000);
}

HTML：

<div id="output">
   <ul></ul>
</div>

我已尝试过很多可以在代码示例中看到的内容。

Answer 1

好的，所以我用两种方式解决了这个问题第一个是棘手的，我一直在使用slideDown函数使列表显示像滑动

           $('#output ul').prepend("<li>" + arr[i][0] + "-" + arr[i][1] + "</li>").children(':first').hide().slideDown(1000).fadeIn(3000);

和第二个答案

    $('#output ul li').animate({'marginTop' : "+=20px"}, 1000);
      $('#output ul').prepend("<li>" + arr[i][0] + "-" + arr[i][1] + "</li>").children(':first').hide().fadeIn(4000);

我将ul css更改为position: absolute;

现在它可以工作：）

阅读列表并使用fadein在顶部为新项目设置动画

1 个答案: