我们如何可以追加一个元素的列表,通过一个淡入jQuery的$。每个方法中效果
问题描述:
我有一个JSON响应jQuery的通过让阿贾克斯($.ajax
) 上.done()
回调,我操纵响应HTML输出
.done(function(response) {
$.each(response, function(i, video) {
html = '<div class="col-lg-6">'+response.img+'</div>";
$(html).appendTo('#myImages');
})
})
所以,上面的代码完美的作品,但我想acheive的事情是,我想会出现在每个的div图像由一个有轻微的淡入效果[追加VAR = HTML到#myImages]之一,所以我如何添加这个。我正在用setTimeout
函数进行检查,但这并不符合我的要求。
答
为了使其褪色,你可以尝试以下操作:
$(html).hide().appendTo('#myImages').fadeIn(1000);
接下来,如果你想建立一个顺序,有一些方法来做到这一点,这里是最简单的异步/ 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);
}
}
})
这给出了淡入效果,并且一次出现所有图像。但我需要在每个元素附加到父div之间的延迟,所以我希望我得到所需的效果,像一个接一个地出现 –
@SalihK刚刚更新了答案... – dhilt