javascript - 我们如何在 jQuery $.each 方法中逐一追加具有淡入效果的元素列表

Question

我有一个通过 jQuery Ajax 获取的 json 响应 ($.ajax) 在 .done() 回调中，我正在操作对 html 输出的响应

.done(function(response) {
     $.each(response, function(i, video) {
        html = '<div class="col-lg-6">'+response.img+'</div>";
        $(html).appendTo('#myImages');
    })    
})

所以，上面的代码工作完美，但我想要实现的是，我想用图像[append var=html to #myImages] 一个接一个地出现每个div，并带有轻微的fadeIn效果，所以我怎样才能添加这个。我正在使用 setTimeout 函数进行检查，但这并不能按我想要的方式工作。

Answer 1

要使其淡入，您可以尝试以下操作:

$(html).hide().appendTo('#myImages').fadeIn(1000);

接下来，如果你想构建一个序列，有一些方法可以做到，这里是最简单的 async/await 尝试:

async function render(item, delay) {
  html = '<div class="col-lg-6">' + item.img + '</div>";
  $(html).hide().appendTo('#myImages').fadeIn(delay);

  return new Promise(function(resolve){
    setTimeout(function() {
      resolve();
    }, delay);
  })
}

.done(function(response) {
  for(var i = 0; i < response.lenght; i++) {
    try {
      await render(response[i], 1000);
    }
    catch(err) {
      console.log(err);
    }
  }
})