CODEWITHSUNDEEP
javascriptjqueryhtmlfadeinchildren
henryaaron
henryaaron

Reputation: 6192

jQuery fade in child after child

For some reason, I know this is possible without using selectors or classes or identifiers, I just cant figure it out.

I have some divs nested in other divs and I want to fade each one in, one after the other, from the shallowest div to the deepest div.

I initially though .each() or .children() but I just cant figure it out. I'm not sure how it would be written.

But, for some reason, I have a strong feeling, it could be accomplished with a short simple script, can anybody help me figure that out?

Here's a fiddle which should be more understandable. http://jsfiddle.net/3z9Bf/

Don't let the fiddle confuse you though. I am not trying to just .fadeIn the first div I began writing the script myself when I realized I couldn't do it myself.

Upvotes: 0

Views: 415

Answers (1)

Joseph Silber
Joseph Silber

Reputation: 219920

Here's a simple plugin:

$.fn.cascadeChildren = function (speed) {
    var $children = this.children();

    if ( ! $children.length ) return;

    speed = speed || 300;

    $children.animate({ opacity: 1 }, speed, function () {
        $(this).cascadeChildren(speed);
    });
};

Use it as follows:

$('#element').cascadeChildren();

Here's the fiddle: http://jsfiddle.net/GUFzc/

Upvotes: 7

Related Questions