Slide div test

by anup1986

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="container marg">
    <div class="row" id="host">
        <div class="col-sm-12 one"></div>
    </div>
    <div class="row marg">
        <div class="col-sm-4">
            <button class="btn btn-default" id="btn">Transit in</button>
            <button class="btn btn-default" id="btn2">Transit out</button>
        </div>
    </div>
</div>

CSS

.marg {
    margin: 50px 0 0 0;
}
.row {
    border: 1px solid #ccc;
}
.col-sm-12 {
    border: 1px dashed black;
    min-height: 50px;
}
.one {
    background: #808080;
    transition: left 0.2s ease-in-out;
    left: 0;
}
.two {
    background: #CCC;
}
.slide {
    left: 0;
}
.out {
    left: -50%;
    transition: left 0.2s ease-in-out;
}
.in {
    left: 0;
    transition: left 0.2s ease-in-out;
}

JavaScript

var one = $('.one'),
    two = $('<div class="col-sm-12 two"></div>')
    host = $('#host');

$('html').css('overflow-x', 'hidden');

$('#btn').on('click', function () {
    one.addClass('out');
    //    host.append(two);
    //    two.addClass('slide');
    //    two.css('left', '100%').addClass('in');

    /*
    setTimeout(function () {
        one.remove();
    }, 200);
    */
});

$('#btn2').on('click', function () {
    one.addClass('out').removeClass('in');
});