fade in multiple elements, then have them all fade out and be replaced

Question

I'm not sure if this is possible in jQuery, since this is bordering on just animation territory, but I figured I'd give it a shot.

I'd like to have multiple elements within a section fade in each onclick, and once the last element in that section appears, have the whole section fade out on click and be replaced with a new section.

Here's what I've tried, but the code isn't working: http://jsfiddle.net/tuckyeah/xht9qbao/11/

HTML

    <div class="section-0">
    <div class="fadeIn">
        <p>I should show up.</p>
    </div>
    <div class="fadeIn">
        <p>Then me, then we should both disappear when we're clicked on.</p>
    </div>
</div>
<div class="section-1">
    <div class="fadeIn">
        <p>Then I should show up next.</p>
    </div>
    <div class="fadeIn">
        <p>Followed by me, then we should both fade out too when we're clicked.</p>
    </div>
</div>

script

$(document).ready(function () {
$('.fadeIn').hide();
$(document).on('click', function () {
    $('.fadeIn:hidden:first').fadeIn('slow');
})
    .click();

if($('.section-0 fadeIn:last-child').is(':visible') ) {
$('.section-0').on('click', function() {
    $('.section-0').fadeOut('slow', function() {
           $('.section-1').delay('slow').fadeIn();
     });
 });
}
});

Thank you!

Answer 1

Replace your JS code with:

var fadeInNo = 0;
var fadeInSection = 0;

$(document).ready(function () {
    $('.fadeIn').hide();
    $(document).on('click', function () {
        if(fadeInNo == 2) {
            $('.section-' + fadeInSection).fadeOut('slow');
            fadeInNo = 0;
            fadeInSection++;
        }
        else {
            $('.section-' + fadeInSection + ' .fadeIn:eq(' + fadeInNo + ')').fadeIn('slow');
            fadeInNo++;
        }
    });
});

Answer 2

I did it as i inderstood. Here it is – jsfiddle

$(document).ready(function () {
$('.fadeIn:gt(0)').hide();
var $s1 = $('.section-1');
$('.section-0').on('click',function(){
    var $el = $(this);
    $el.find('>div:last-of-type').fadeIn();
    $el.on('click', function () {
        $el.fadeOut(300, function () {
            $s1.find('>div:first-of-type').fadeIn();
        });  
    });       
});
$s1.on('click',function(){
    var $el = $(this);
    $el.find('>div:last-of-type').fadeIn();
    $el.on('click', function () {
        $el.fadeOut(300);  
    });
});

});

Answer 3

Here's one way:

$('.fadeIn').hide().click(function () {
    if ($(this).closest('.section').find('.fadeIn:visible').length < $(this).closest('.section').find('.fadeIn').length) {
        $(this).parent().find('.fadeIn:not(:visible):first').fadeIn('slow');
    } else {
        $(this).closest('.section').fadeOut('slow', function () {
            $(this).next().find('.fadeIn:first').fadeIn();
        })
    }
});
$('.fadeIn:hidden:first').fadeIn('slow');

jsFiddle example