JQuery按顺序淡入不同元素类型的子元素 [英] JQuery fadeIn children elements of different element types sequentially

问题描述

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

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

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

我想要 和 元素到 fadeIn().如果可能的话，可以一个接一个，或者一次全部完成.

子元素会有所不同，并不总是特定的 和 元素，因此针对特定元素类型是不可能的.

我试过了:

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

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

解决方案

回调和递归?呸骗子！:-)

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

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

使其可重用于其他父元素:

functionfadeInChildren(parent) {var elems = $(parent).children();$(elems).each(function(index) {$(this).delay(1200*index).fadeIn(1000);});}

并像这样使用函数:

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

I'm trying to fadeIn() the children elements of a parent element using jQuery. The children elements are all of different types.

For example one of my parent elements may look like this:

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

I would like for the <span> and <img> elements to fadeIn(). If possible in a sequence of one after the other, or all at once.

The children elements are going to vary and not always be specifically <span> and <img> elements so targeting specific element types is out of question.

I've tried:

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

Nothing happens. Could someone lead me in the right direction?

解决方案

Callbacks and recursion? Bah humbug! :-)

You can also try this simpler, non-callback solution:

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

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

See it in action: https://jsfiddle.net/fppjkv0o/30/

Source: https://stackoverflow.com/a/4661858/1152633

Make it reusable for other parent elements:

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

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

And use the function like this:

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

这篇关于JQuery按顺序淡入不同元素类型的子元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！