读取列表并使用淡入淡出顶部的新项目

我有一个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>

我已经尝试了很多东西，你可以将代码样本中看到。

来源

2013-02-28 shaharnakash

是否可以设置小提琴？帮助我们更懒的类型。 – GordonsBeard 2013-02-28 18:48:35

我不知道如何将xml文件添加到小提琴 – shaharnakash 2013-02-28 18:52:32

是的，意识到我已经把我的脚放到嘴里太迟了！ – GordonsBeard 2013-02-28 18:54:55

行，所以我已经解决了，在两种方式第一个是棘手的，我已经使用了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;

，现在它的工作:)

来源

2013-03-02 10:23:48 shaharnakash

读取列表并使用淡入淡出顶部的新项目

回答

相关问题