Audyx full-width panel adding animation

by sungsoonz

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<button>Add 2</button>
<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <div class="panel" id="panel_1">
                 <h2>1</h2>

            </div>
            <div class="panel hidden standby" id="panel_2">
                 <h2>2</h2>

            </div>
            <div class="panel" id="panel_3">
                 <h2>3</h2>

            </div>
            <div class="panel" id="panel_4">
                 <h2>4</h2>

            </div>
        </div>
    </div>
</div>

CSS

html, body {
    background: #eee;
}
button {
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background: #5b98cc;
    border-radius: 50%;
    border: 0;
    color: white;
    width: 60px;
    height: 60px;
}
.panel {
    background: #fff;
    padding: 15px;
    height: 200px;
    border-radius: 0;
}
.standby {
    margin-right: 100%;
}
h2 {
    text-align: center;
}
#panel_1 {
    border-top: 3px solid red;
}
#panel_2 {
    border-top: 3px solid green;
}
#panel_3 {
    border-top: 3px solid blue;
}
#panel_4 {
    border-top: 3px solid purple;
}

JavaScript

$('button').click(function () {
    reposition($('#panel_3'));
});

function reposition(result) {
    var height = (result.outerHeight() + 40);
    result.animate({
        "margin-top": height
    }, 400, function () {
        add($('#panel_2'), result);
    });
}

function add(questionnaire, result) {
    questionnaire.toggleClass('hidden');
    result.css("margin-top", "0");
    questionnaire.animate({
        "margin-right": "0"
    }, 400);
}