Question

我正在使用jQuery尝试fadeIn()父元素的子元素。子元素都是不同的类型。

例如，我的一个父元素可能如下所示：

<div class="section-content-parent">`
   <span class="section-content-header">SPAN CONTENT</span>
   <img src="#">
   <span class="section-content-subheader">SUBHEADER CONTENT</span>
</div>

我希望将<span>和<img>元素添加到fadeIn()。 如果可能的话，一个接一个的序列，或者一个接一个的序列。

子元素会有所不同，并不总是具体<span>和<img>元素，因此针对特定元素类型是不可能的。

我试过了：

$(document).ready(function(){
    $(".section-content-parent").children().fadeIn(slow);
});

什么都没发生。有人能引导我走向正确的方向吗？

Answer 1

回调和递归？呸骗子！： - ）

您还可以尝试这种更简单的非回调解决方案：

var elems = $('.section-content-parent').children();

$(elems).each(function(index) {
    $(this).delay(1200*index).fadeIn(1000);
});

查看实际操作：https://jsfiddle.net/fppjkv0o/30/

来源：https://stackoverflow.com/a/4661858/1152633

使其可以重复使用其他父元素：

function fadeInChildren(parent) {
    var elems = $(parent).children();

    $(elems).each(function(index) {
        $(this).delay(1200*index).fadeIn(1000);
    });
}

并使用这样的功能：

fadeInChildren('.section-content-parent');

Answer 2

为了让它们在彼此之后淡入，我们可以在淡入时使用回调方法。

首先，添加此函数，以便我们可以递归调用它

function fadeChildrenIn(childNum){

    var children = $("#section-content-parent").children();

    var $child = $(children[childNum]);
    $child.fadeIn(function(){
        if(childNum < children.length)
            fadeChildrenIn(++childNum);
    });
}

然后，当您希望事件发生时，您可以使用

fadeChildrenIn(0);

参数是我们正在衰落的孩子的索引，然后该函数检查索引是否小于总孩子数，如果是当前孩子已经褪色它移动到下一个孩子，如果没有更多留下的孩子只是停下来。

这也将满足您使用任何类型的子元素IE的要求。 span，img等。

JQuery按顺序淡化不同元素类型的子元素

2 个答案: