I want to make elements appear one by one. But they are fading in at the same time altough I specify ids. Is there a more proper way to achive tihs?
<!DOCTYPE html>
<html>
<head>
<script src='http://code.jquery.com/jquery-2.1.0.min.js'></script>
<script>
var i=0;
function loadXMLDoc()
{
var xmlhttp,txt,x;
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
xmlDoc=xmlhttp.responseXML;
txt=" ";
x=xmlDoc.getElementsByTagName("ARTIST");
setInterval(function() {
txt+=x[i].childNodes[0].nodeValue + "<br>";
$('#myDiv').html('<p id="p'+i+'" style="display:none;">'+txt+'</p>');
$("#p"+i).fadeIn(1000);
i+=1; }, 2000);
}
xmlhttp.open("GET","http://www.w3schools.com/ajax/cd_catalog.xml",true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>My CD Collection:</h2>
<div id="myDiv"></div>
<button type="button" onclick="loadXMLDoc()">Get my CD collection</button>
</body>
</html>
Since you already using jQuery... not sure that this is more elegant... but it is little simpler. :)
$(document).ready(function () {
$('button').click(function () {
$.ajax({
type: "GET",
url: "cd_catalog.xml",
dataType: "xml",
success: function (xml) {
$(xml).find('ARTIST').each(function (i) {
artist = $(this).text();
$("#myDiv").append("<p class='artist'>" + artist + "</p>");
$(".artist").delay(i * 1000).fadeIn(1000);
});
}
});
});
});
CSS:
.artist {
display:none;
}
and your existing HTML.