Bootstrap 3 Slide in Menu Animation Direction on Mobile

http://stackoverflow.com/questions/37781665/bootstrap-3-slide-in-menu-animation-direction-on-mobile

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>
<!-- Navigation -->
      <div class="navbar navbar-default navbar-inverse" role="navigation">
          <div class="navbar-header">
              
              <button type="button" class="navbar-toggle">
                  <span class="sr-only">Toggle Navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
              </button>
              
              <a class="navbar-brand" href="#">
                  <div class="logo">
                    <img src="images/logo_white.png" class="logo" alt="logo"/>
                  </div>
              </a>
              
          </div>
              
              <div class="navbar-collapse">
                  <ul class="nav navbar-nav navbar-right">
                      <li><a href="#" class="active">Home</a></li>
                      <li><a href="#">Work</a></li>
                      <li><a href="#">Course</a></li>
                      <li><a href="#">Contact</a></li>
                  </ul>
              </div>
          
      </div>
      <!-- End Navigation-->

CSS

.indexcity {
  z-index: 9999;
}

.right {
    right: 0 !important;
    left: 0 !important;
}

@media only screen and (max-width: 767px) {
    .navbar-collapse{
      background-color:#ffc107;
      position: fixed;
      top: 0;
      transition:all 0.8s ease-out;
      height: 100%;
      width: 10%;
      left: 70px;
    }
    .navbar-inverse .navbar-nav>li>a {
    color: #000;
    }
}

JavaScript

jQuery(function($){
    $('.navbar-toggle').click(function(){
    $('.navbar-collapse').toggleClass('right');
    $('.navbar-toggle').toggleClass('indexcity');
    });
});