Audyx calibration page transition

by sungsoonz

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="menu-bar">
  <h3>Audyx</h3>
</div>
<div class="body start">
  <div class="main-content">
    <div class="row">
      <div class="col-xs-12">
        <div class="panel" id="panel_1">
          <h3>Calibrage cabine</h3>
          <button class="btn btn-primary">
            Start calibration
          </button>
        </div>
      </div>
    </div>

  </div>
</div>

<div class="standby wizard">
  <div class="main-content">
    <div class="row">
      <div class="col-xs-12">
        <div class="panel" id="panel_2">
          <h3>Wizard</h3>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

html,
body {
  background: #eee;
  margin: 0;
  padding: 0;
}

.body {
  padding-top: 79px;
  position: relative;
  overflow: hidden;
}

.main-content {
  border-top: 0;
  padding-right: 10px;
  padding: 15px 15px 0;
}

h3 {
  margin: 0 auto;
  line-height: 2;
  text-align: center;
}

button.btn {
  display: block;
  margin: 100px auto;
}

.menu-bar {
  min-height: 79px;
  position: fixed;
  top: 0;
  z-index: 999;
  left: 0;
  right: 0;
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
  padding: 11px 0 8px;
  background-color: white;
  border-bottom: 1px solid #e6e5e5;
}

.panel {
  background: #fff;
  padding: 15px;
  border-radius: 0;
  height: 300px;
}

.standby {
  right: -100px;
  position: absolute;
  top: 79px
}

JavaScript

$(document).ready(function() {
  $('button').on("click", function() {
    alert("clicked");
    switch($('.start'), $('.wizard'));
  });
});
function switch($start, $wizard) {
  $wizard.toggleClass('standby');
  $start.addClass('hidden');
  $wizard.animate({
    "right": "0"
  }, 400);
}