iterating through and showing hidden child divs jquery

Question

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

Just set a setInterval, and clear it when you have iterated through all children? — Terry, Apr 04 '16 at 00:03
@Tasos: thank you! this works. does __OBJECTS.shift() just push the top element off the queue and move to the next one? Terry, I tried that but must've been doing something wrong. — socrates, Apr 04 '16 at 00:08
have a look here for the differences -- the last answer -- http://stackoverflow.com/questions/25517633/opposite-of-push — Tasos, Apr 04 '16 at 00:11

score 0 · Accepted Answer · answered May 07 '16 at 21:52

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.

score 0 · Answer 2 · answered May 07 '16 at 22:12

As what i understood from the title you need it with JQ, so you can use this code

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

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

iterating through and showing hidden child divs jquery

2 Answers2