gizli çocuk divs yineleme ve gösterme

Question

Ben <div id='content'> <p> foo </p> <p> bar </p> </div> var. Her <p> etiketinde CSS visbility: hidden olarak ayarlanmıştır. <div id='content'> içinde her <p> etiketini yinelemek, paragrafın görünürlüğünü visible, 500 gecikmesini değiştirmek ve daha sonra bir sonraki paragrafta aynı eylemi gerçekleştirmek istiyorum. .delay(500)'un CSS animasyonlarıyla çalışmadığını ve .queue()'u kullanmanız gerektiğini bildiğimi biliyorum, ancak bunu nasıl yapacağımı bilmiyorum.

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

@Tasos öne sürdüğü gibi,

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

iyi çalışıyor.

Answer 2

i JQ ile gerek başlık anladıklarıdır gibi

, böylece siz de css gönderebilir miyim bu kodu

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

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