Ajax success function

Question

I have an ajax success function that's executing the following code:

success: function(json) {
  for (var i = 0; i < json.album.tracks.length; i++) {
      audio.push(json.album.tracks[i].url);
      var new_li = $('<li class="spacer" data-id="' + json.album.tracks[i].id + '">' + json.album.tracks[i].title + '</li>').hide();
      $('.playlistSongs').append( $(new_li).fadeIn(1000)); //1000 is just for testing    
  }
}

This works! The issue is its not working like I want it to. I want each track to fade in one at a time in the playlist div. However, all the tracks fade in together. I tried adding a .delay() at different places but it made no difference.

My question is, what do I need to do in order to have each track fade in one at a time instead of all together? I also tried moving the code outside the success callback but still not working.

Thanks.

Answer 1

Try this:

  var lis = ""
  for (var i = 0; i < json.album.tracks.length; i++) {
      audio.push(json.album.tracks[i].url);
      lis += '<li class="spacer" data-id="' + json.album.tracks[i].id + '">' + json.album.tracks[i].title + '</li>';
  }

  $(lis)
        .hide()
        .appendTo('.playlistSongs')
        .each(function(index) {
            // For each li, wait some time and fadeIn. The first one will not have a delay
            $(this).delay(400*index).fadeIn(300);
        });

Answer 2

Instead of

 $('.playlistSongs').append( $(new_li).fadeIn(1000)); 

try

$('.playlistSongs').append(new_li).fadeIn();