jQuery XML loading and then innerfade effect
- by Ryan Max
Hello,
I think I can explain myself without code, so for brevity's sake here we go:
I am using jquery to pull data from an xml and put it into a ul on the page with each xml entry as a li. This is working great!
However, what I am trying to do afterwards is use the innerfade plugin to make a simple animation between each of the li's. It's not working though, as it is still just loading the static list with each item visible (whereas if innerfade was working it would only display the first....then fade into the second, etc)
It's not an innerfade problem however, because if I add the list in manually to the page (not injecting it with jquery) then the innerfade works fine.
I'm relatively new to DOM scripting, so I think I am missing something here. I'm not quite sure how jQuery sequences everything, and I'm having trouble phrasing my question in a search engine friendly manner so here I am.
Is it possible to have jquery pull the data from xml, then inject it into the page, then have innerfade work it's magic? Or am I thinking about this the wrong way?
xml code:
$.ajax({
type: "GET",
url: "xml/playlist.xml",
dataType: "xml",
success: function(xml) {
$(xml).find('song').each(function(){
var name = $(this).attr('title');
var date = $(this).attr('artist');
var message = $(this).attr('path');
$('<li></li>').html('<span id="an_name">'+name+'</span><span id="an_date">'+date+'</span><span id="an_message">'+message+'</span>').appendTo('#anniversary');
});
}
});
innerfade code:
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(
function(){
jQuery('#anniversary').innerfade({
speed: 1000,
timeout: 5000,
type: 'sequence',
});
});
