讀取列表並使用淡入淡出頂部的新項目

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

讀取列表並使用淡入淡出頂部的新項目

回答

相關問題