patapata/test.html

Animation of dom, flipping its sections for showing and hiding the whole

<script src="jquery.min.js"></script>
<script src="index.js"></script>
<script>
$(function () {
    $('.main').patapata(8, 4, {unitDur: 500}).show().then(function (pp) {
        pp.$dom.click(function () {
            pp.hide();
        });
    });
});

</script>

<style>
.main {
    color: white;
    transition-duration: 500ms;
    text-align: center;
    margin: auto;
    position: relative;
    width: 400px;
    height: 200px;
}

.main .info-content {
    position: relative;
    opacity: 0;
}
</style>

<div class="main"><div class="info-content">aaa</div></div>