0

jQuery で読み取り、それをリストに解析する必要がある XML ファイルがあります。読み取る新しい項目はそれぞれ、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>

コード サンプルで確認できるように、多くのことを試しました。

4

1 に答える 1

0

わかりましたので、2つの方法で最初の方法がトリッキーであることを解決しました.slideDown関数を使用して、リストをスライドのように表示しています

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

そして2つ目の答え

    $('#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 に答える