How to reverse the animation using delay?

Question

I am adding a class to div to expand the height. once the height is reached, i am making each of span to appear with some dealy.

when user clicks back, i am removing the height of the div. before i need to roll-back the span fade from the last. (3,2,1)

How to do it?

here is the code :

$('button').click(function () {

    $('.parent').toggleClass('active');

    $('.parent').on('animationend webkitTransitionEnd', function() {
                $('span').each(function (i) {
                    $(this).delay(i*1000).queue(function (next) {
                        $(this).addClass('fadeIn');
                        next(); //used just to dequeue
                    });
                });
            })

});

Live Demo