How to mount this effect with JS?

Question

I have a list, and I would like to create a loop by passing each of these elements, basically what I want is this effect:

$.each($('.elemento'), function(i, el){
   $(el).fadeIn(100);
   $(el).delay(400).addClass("esconder");
   /*esperar 400ms até o loop rodar de novo fazendo o mesmo efeito com o próximo elemento*/   
});

How can I add this delay to the end of my loop before it interacts with the next element? It passes shows the element and then creates an effect fadeOut already defined in CSS

Answer 1

One way to do this would be to use setTimeout or setInterval. I think something like that might work:

var elms = $('.elemento');
var i = 0;
var interval = setInterval(function(){
    if (i >= elms.length) {
        clearInterval(interval);
    } else {
        var el = elms[i++];
        $(el).fadeIn(100);
        $(el).delay(400).addClass("esconder");
    }
}, 900);