遍历并显示隐藏的子div jquery

Posted 2023-02-21

【中文标题】遍历并显示隐藏的子div jquery

【英文标题】：iterating through and showing hidden child divs jquery

【发布时间】：2016-07-23 09:28:37

【问题描述】：

我有<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;

【问题讨论】：

你也可以发布你的css吗？

全部完成，. . . . .

jsfiddle.net/tvz039nk

只设置一个setInterval，当你遍历所有children时清除它？

@Tasos：谢谢！这行得通。 __OBJECTS.shift() 是否只是将顶部元素推离队列并移至下一个元素？特里，我试过了，但一定是做错了什么。

【参考方案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)
    

效果很好。

【参考方案2】：

正如我从标题中了解到的，你需要 JQ，所以你可以使用这个代码

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

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