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

Ajax成功功能

2 个答案: