socrates socrates - 2 years ago 62
Javascript Question

iterating through and showing hidden child divs jquery

I have

<div id='content'> <p> foo </p> <p> bar </p> </div>
. Each
tag has CSS set to
visbility: hidden
I want to iterate through each
tag within
<div id='content'>
, change the visibility of the paragraph to
, delay 500, and then perform the same action on the next paragraph. I am aware that
won't work with CSS animations and that you need to use
, but I'm not sure how to do this.

$(this).css('visibility', 'visible');
//delay before continuing iteration


position: absolute;
font-size: 25px;
width: 50%;
top: 20%;
left: 5%;
-moz-animation-duration: 2s;
-moz-animation-delay: 1s;
-moz-animation-iteration-count: 1;
-moz-animation-duration: 1s;
-moz-animation-delay: 2s;
-moz-animation-iteration-count: 1;
visibility: hidden;

Answer Source

As @Tasos suggested,

var __OBJECTS = [];

$('#content').children('p').each(function() {


function addPositioningClasses() {
    var $card = __OBJECTS.shift();
    $card.css('visibility', 'visible'); 
    if (__OBJECTS.length) {
        setTimeout(addPositioningClasses, 500)

works great.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download