0

I have a XML file that I need to read with jQuery and then parse it into a list, and each new item that I'll read should show at the top with fadeIn and all the others items should be animate down. like http://medihack.github.com/fiji/demos/ticker/ticker.html

I have that XML file that I'll retrieve the data

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>

and I have that code jQuery and style

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>

I have tried many things that you can see in the code sample.

4

1 回答 1

0

好的，所以我已经通过两种方式解决了第一个很棘手的问题，我一直在使用 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);

我将ulcss更改为position: absolute;

现在它工作了:)

于 2013-03-02T10:23:48.000 回答