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