如何使用延迟来反转动画？

Question

我正在为div添加一个类来扩展高度。一旦达到高度，我就会使span中的每一个都出现一些dealy。

当用户点击回来时，我将删除div的高度。在我需要从最后一次回滚跨度淡出之前。 （3,2,1）

怎么做？

这是代码：

$('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