迭代并显示隐藏的子divs jquery

Question

我有<div id='content'> <p> foo </p> <p> bar </p> </div>.每个<p>标签都设置了CSS visbility: hidden.我想迭代遍历每个<p>标记<div id='content'>,将段落的可见性更改为visible,延迟500,然后对下一段执行相同的操作.我知道.delay(500)不能使用CSS动画,你需要使用.queue(),但我不知道如何做到这一点.

$('#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建议的那样，

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

效果很好。