iterazione e visualizzazione di div js nascoste jquery

Question

Ho <div id='content'> <p> foo </p> <p> bar </p> </div>. Ogni tag <p> ha CSS impostato su visbility: hidden. Desidero ripetere ogni tag <p> all'interno di <div id='content'>, modificare la visibilità del paragrafo su visible, attendere 500 e quindi eseguire la stessa azione nel paragrafo successivo. Sono consapevole che .delay(500) non funzionerà con le animazioni CSS e che è necessario utilizzare .queue(), ma non sono sicuro di come farlo.

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

i 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

Come suggerito @Tasos,

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

grandi opere.

Answer 2

come quello che ho capito dal titolo ne avete bisogno con JQ, quindi è possibile utilizzare questo codice

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

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