Iterate and display hidden jquery child divs

Question

I have a <div id='content'> <p> foo </p> <p> bar </p> </div> . Each <p> has CSS set to visbility: hidden . I want to iterate through the <p> inside the <div id='content'> , change the visibility of the paragraph to visible , the delay is 500, and then perform the same action in the next paragraph. I know that .delay(500) will not work with CSS animations and that you need to use .queue() , but I'm not sure how to do this.

 $('#content').children('p').each(function() { $(this).css('visibility', 'visible'); //delay before continuing iteration }); 

CSS

 #content { position: absolute; font-size: 25px; width: 50%; top: 20%; left: 5%; -moz-animation-duration: 2s; -moz-animation-delay: 1s; -moz-animation-iteration-count: 1; } p { -moz-animation-duration: 1s; -moz-animation-delay: 2s; -moz-animation-iteration-count: 1; visibility: hidden; } 

Answer 1

As @Tasos suggested,

 var __OBJECTS = []; $('#content').children('p').each(function() { __OBJECTS.push($(this)); }); addPositioningClasses(); function addPositioningClasses() { var $card = __OBJECTS.shift(); $card.css('visibility', 'visible'); if (__OBJECTS.length) { setTimeout(addPositioningClasses, 500) } } 

works great.

Answer 2

As I understood from the name, you need this with JQ, so you can use this code

 $('#content').children('p').each(function (index, elem) { setTimeout(function () { $(elem).css({visibility: 'visible'}); }, 500 * index); }); 

https://jsfiddle.net/tvz039nk/3/