jquery fadeIn (on)click each element in succession

I am trying to fade each element in a div to fadeIn (in) succession. I know how to fade in the whole开发者_开发知识库 block but not each individual div.

http://jsfiddle.net/reggi/Km55n/

$('#button').click(function() {
    setTimeout(function() {
        $('#divWithDivs').fadeIn(500);
    }, 300);
});

You need to fade the next div in the completion callback of the previous one.

For example:

function fadeAll(elems) {
    elems.filter(':hidden:first').fadeIn(1000, function() { fadeAll(elems); });
}

fadeAll($('#parent div'));

Demo
Note that you'll need to hide the children, not the parent.

You could do something like this:

$('#button').click(function() {
    var show_next = function(elem) {
        if (elem.length) {
            elem.fadeIn(300, function () {
                show_next(elem.next());
            });
        }
    };
    show_next($('div#divWithDivs').children().first()); 
});

$('#divWithDivs').children().first().fadeIn(500, function() {
        $(this).next().fadeIn(500, arguments.callee);
    });

Here the demo based on your: http://jsfiddle.net/Km55n/2/