W2UI Demo: utils/3

HTML

<link rel="stylesheet" href="https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css">
<script src="https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.js"></script>
<style>
.container {
    width: 420px;
    height: 230px;
    padding: 10px;
    overflow: hidden;
}
.box {
    /* 
    When background-color is NOT specified, the slide breaks.. why? 
    background-color: #fafafa;
    */
    padding: 4px;
    position: absolute;
    width: 400px;
    height: 200px;
    border: 1px solid silver;
}
</style>
<div class="container">
    <div id="box1" class="box">
        This this first div. It just has some text as example. This box does not have any other elements then some text.
        This this first div. It just has some text as example. This box does not have any other elements then some text.
        This this first div. It just has some text as example. This box does not have any other elements then some text.
        This this first div. It just has some text as example. This box does not have any other elements then some text.
    </div>
    <div id="box2" class="box" style="display: none; background-color: #E0FFE1;">
        <div style="float: left; width: 100px; height: 30px; border: 1px solid silver; margin: 3px;">1</div>
        <div style="float: left; width: 100px; height: 30px; border: 1px solid silver; margin: 3px;">2</div>
        <div style="float: left; width: 100px; height: 30px; border: 1px solid silver; margin: 3px;">3</div>
        <div style="float: left; width: 100px; height: 30px; border: 1px solid silver; margin: 3px;">4</div>
        <div style="float: left; width: 100px; height: 30px; border: 1px solid silver; margin: 3px;">5</div>
        <div style="float: left; width: 100px; height: 30px; border: 1px solid silver; margin: 3px;">6</div>
        <div style="float: left; width: 100px; height: 30px; border: 1px solid silver; margin: 3px;">7</div>
        <div style="float: left; width: 100px; height: 30px; border: 1px solid silver;...

JavaScript

var current = 'box1';
function go() {
    if (current == 'box1') { current = 'box2'; w2utils.transition(query('#box1')[0], query('#box2')[0], query('#trans').val()); return; }
    if (current == 'box2') { current = 'box1'; w2utils.transition(query('#box2')[0], query('#box1')[0], query('#trans').val()); return; }
}