Edit in JSFiddle

// Show elements on DOM ready
$('body').tagimator('show');

// Hide elements on click
$('#hide').click( function() {
    $('body').tagimator('hide');
});

// Show elements on click
$('#show').click( function() {
    $('body').tagimator('show');
});

<!-- Interaction buttons -->
<button id="show">show</button>
<button id="hide">hide</button>

<!-- standard transistion use default speed, easing etc -->
<div data-fx-step="1" data-fx="fade" class="box">
    This is a box
</div>
<!-- Supports nested structures too -->
<div data-fx-step="2" data-fx="fade" class="box">
    <div data-fx-step="3" data-fx="slide" data-fx-direction="left" data-fx-speed="800" class="inner">
        Nested box
    </div>
    <div data-fx-step="3" data-fx="slide" data-fx-direction="right" data-fx-speed="800" class="inner">
        Nested box 2
    </div>
</div>

body {
    background-color: #222;
    color: #fff;
    font-family: sans-serif;
    text-align: center;
}

.box {
    height: 100px;
    width: 200px;
    background-color: #444;
    text-align: center;
    margin: 10px auto 0 auto;
    overflow: hidden;
    line-height: 100px;
}

    .box .inner {
        height: 90px;
        width: 90px;
        background-color: 10px;
        float: left;
        background-color: #666;
        margin: 5px;
        font-size: .8em;
    }