iterating durch und zeigt versteckte Kinddivs jquery

Question

Ich habe <div id='content'> <p> foo </p> <p> bar </p> </div>. Jeder Tag <p> hat CSS auf visbility: hidden festgelegt. Ich möchte jedes <p> Tag innerhalb von <div id='content'> durchlaufen, die Sichtbarkeit des Absatzes auf visible ändern, 500 verzögern und dann die gleiche Aktion für den nächsten Absatz ausführen. Ich bin mir bewusst, dass .delay(500) nicht mit CSS-Animationen funktioniert und dass Sie .queue() verwenden müssen, aber ich bin nicht sicher, wie dies zu tun ist.

$('#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

Als @Tasos, schlug

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

funktioniert super.

Answer 2

Als das, was ich aus dem Titel zu verstehen Sie es mit JQ benötigen, so können Sie diesen Code verwenden

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

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