子要素divsを繰り返して表示します。

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

を示唆したように。私はJQとあなたがそれを必要とタイトルから分かるものと

Answer 2

、あなたが

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

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