javascript - Ajax成功函数

Question

我有一个执行以下代码的 ajax 成功函数：

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    
  }
}

这行得通！问题是它没有像我想要的那样工作。我希望每首曲目在播放列表 div 中一次淡入一个。然而，所有的音轨一起淡入。我尝试在不同的地方添加一个 .delay() ，但没有任何区别。

我的问题是，我需要做什么才能让每首曲目一次淡入一个而不是全部一起淡出？我还尝试将代码移到成功回调之外，但仍然无法正常工作。

谢谢。

Answer 1

代替

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

尝试

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

Answer 2

尝试这个：

  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);
        });