我们如何在 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');
    })    
})

所以，上面的代码运行得很好，但是我想实现的是，我想用image[追加var=html到 #myImages]一个接一个地出现每个div，并带有轻微的淡入淡出效果，所以我该如何添加这个。我正在使用setTimeout功能进行检查，但这并没有按照我的意愿工作。

Answer 1

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

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

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

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