JQuery fadeIn children elements of different element types sequentially

Question

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?

typo: `fadeIn(slow);` should be `fadeIn("slow");` Your [JavaScript console](http://webmasters.stackexchange.com/questions/8525/how-to-open-the-javascript-console-in-different-browsers) should have complained about the undefined variable. [Works](http://codepen.io/paulroub/pen/RWdjqZ) after that fix. — Paul Roub, Nov 18 '15 at 21:16
slow is a parameter as string , not variable. You need fadeIn("slow"). Also all your elements needs to hidden first before you invoke fadeIn. Check this out : https://fiddle.jshell.net/a2n234eq/7/ — DinoMyte, Nov 18 '15 at 21:17
I see. With both of your comments I have been able to get it to work. On a side note what if I wanted it to be sequential. — Jesse Elser, Nov 18 '15 at 21:19
@JesseElser - FYI, your "side note" comment is actually more of an acceptable question for this site than your current post (which would normally be flagged for removal as a simple typographical error.) — wahwahwah, Nov 18 '15 at 21:26

score 5 · Accepted Answer · edited May 23 '17 at 12:15

5

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

edited May 23 '17 at 12:15

Community

1
1

answered Nov 18 '15 at 21:35

skippr

2,656
3
24
39

Bah if only you'd posted this sooner I would have accepted this one. I actually used yours because I switched from fadeIn to fadeTo using opacity settings that way my parent elements did not show a change in size as the children faded in. – Jesse Elser Nov 18 '15 at 21:47
My recommendation (and I think SO says this as well somewhere), is to wait at least a day or two before selecting an answer, so that people like me won't think "oh, it's already answered" and move on. Lots of questions are plagued by this, and it's not uncommon to see a selected answer have way less votes than another's answer. Either way, glad it helped! – skippr Nov 18 '15 at 21:53
Yeah it would be good to wait lol I just don't like keeping others tied up on my questions if i find a working answer :) thanks again – Jesse Elser Nov 18 '15 at 21:55
Just a note, the drawback to this is it's timing managing the sequential fade-ins. If for any reason a fade takes longer than it should then this will end up out of sync. Where as with callbacks it is guaranteed that they will only fade in after the previous one has finished. – samuelmr Nov 20 '15 at 11:39
A valid point @samuelmr, though I'd be interested in knowing how likely/often such a scenario would actually occur. If, say, the browser freezes for a split second, would that actually ruin the fades? Or wouldn't the fades also freeze, and there'd be a slight jump in animation, but no loss in synchronization? – skippr Jan 08 '16 at 16:29

score 1 · Answer 2 · answered Nov 18 '15 at 21:23

To make them fade in after each other we can use the callback method on fade in.

First, add this function so we can call it recursively

function fadeChildrenIn(childNum){

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

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

And then when you want the event to happen you can use

fadeChildrenIn(0);

The argument is the index of the child we are fading, the function then checks if the index is less than the total children, if it is when the current child has faded it moves onto the next one, if there are no more children left is simply stops.

This will also fulfill your requirement of working with any type of child element, IE. span, img etc.

JQuery fadeIn children elements of different element types sequentially

2 Answers2

Linked