socrates socrates - 6 months ago 12
Javascript Question

iterating through and showing hidden child divs jquery

I have

<div id='content'> <p> foo </p> <p> bar </p> </div>
. Each
<p>
tag has CSS set to
visbility: hidden
.
I want to iterate through each
<p>
tag within
<div id='content'>
, change the visibility of the paragraph to
visible
, delay 500, and then perform the same action on the next paragraph. I am aware that
.delay(500)
won't 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

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.

Comments