JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div id="header" style=" color: white; font-weight: bold; background-color: #7E9DBB;border-top-left-radius: 6px;border-top-right-radius: 6px;" >
<div id="titulo" style="background-color: #F95252; color: white; font-weight: bold; border-top-left-radius: 6px;border-bottom-left-radius: 6px; padding: 20px; float: left;text-align: center;">
::Noticias::
</div>
<div style="padding: 2px;">
TĂtulo
</div>
</div>
<div id="footer" style="background-color: #224B9D; border-bottom-right-radius: 6px;border-bottom-left-radius: 6px; color: white; font-weight: bold; padding: 10px; float: none;">
<ul id="result">
</ul>
</div>
</body>
</html>
CSS
#link{
display: none;
list-style: none;
margin-left: 6px;
}
JavaScript
$(function () {
var urlRss = 'http://www.cidades.gov.br/ultimas-noticias?format=feed&type=rss';
$.ajax({
type: "GET",
url: document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=1000&callback=?&q=' + encodeURIComponent(urlRss),
dataType: 'json',
error: function (xhr) {
var erro = xhr.responseText;
alert('Erro ao ler o feed: ' + erro);
},
success: function (xml) {
values = xml.responseData.feed.entries;
var quoteIndex = -1;
for(var i = 0; i < values.length; i++) {
var value = values[i];
var li = $("<li id='link' />");
var lia = $("#link");
var a = $("<a />");
li.html(value.title + "<br />");
a.html(value.link+ "<br />");
$("#result").append(li);
++quoteIndex;
lia.eq(quoteIndex % lia.length)
.fadeIn(2000)
.delay(2000)
.fadeOut(2000,value[i]);
}
}
});
});