javascript - JQuery fadeIn顺序不同元素类型的子元素

Question

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

例如，我的父元素之一可能如下所示:

<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');