遍历并显示隐藏的子div元素jquery

Question

我有一个 <div id='content'> <p> foo </p> <p> bar </p> </div> 的段落。每个 <p> 标记都设置了 CSS，其为 visbility: hidden。 我想要迭代遍历 <div id='content'> 中的每个 <p> 标记，将段落的可见性更改为 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;
}

- socrates

---

你能同时发布你的CSS吗？ - Petr Gazarov

所有的工作已经完成，...... - socrates

https://jsfiddle.net/tvz039nk/ - Tasos

只需设置一个setInterval，当您遍历完所有子元素时清除它？ - Terry

@Tasos：谢谢！这很有效。__OBJECTS.shift() 只是将队列顶部的元素推出并移到下一个吗？Terry，我尝试过了，但一定做错了什么。 - socrates

点击这里查看差异 -- 最后一个答案 -- https://dev59.com/zF8e5IYBdhLWcg3wpLsr - Tasos

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

非常好用。

- socrates

Answer 2

从标题中我理解您需要使用JQ，因此您可以使用以下代码

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

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

- user6213434