I am trying to make a menu from the left with slideout animation. But it does not load the animation, it is not closing or opening, it is staying as normal menu.
This is my code, as follows 

* javascript
* -css
* -html :

```js
$(document).ready(function(){
    $(".fa-times").click(function(){
        $(".sidebar-menu").addClass("hide-menu");
        $(".toggle-menu").addClass("opacity-one");
    });

    $(".fa-times").click(function(){
        $(".sidebar-menu").removeClass("hide-menu");
        $(".toggle-menu").removeClass("opacity-one");
    });
})
```

```css
*{
 margin: 0;
 padding: 0;
 list-style: none;
 text-decoration: none;
}

.fa-times{
 right: 10px;
 top: 10px;
 opacity: 0.7;
 cursor: pointer;
 position: absolute;
 color: white;
 transition: all 0.2s ease-in-out;
}

.fa-times:hover{
 opacity: 1;
}

.sidebar-menu{
 position: fixed;
 width: 250px;
 margin-left: 0px;
 overflow: hidden;
 height: 100vh;
 max-height: 100vh;
 background-color: rgba(17,17,17,0.9);
 opacity: 0.9;
 transition: all 0.3s ease-in-out;
}

.hide-menu{
 margin-left: -250px;
 transition: all 0.3s ease-in-out;
}

.toggle-menu{
 position: fixed;
 padding: 15px 20px 15px 15px;
 margin-top: 70px;
 color: white;
 cursor: pointer;
 background-color: #648B79;
 opacity: 0;
 z-index: 10000;
 font-size: 2em; 
 transition: all 0.2s ease-in-out;
}

.opacity-one{
 opacity: 1;
 transition: all 0.2s ease-in-out;
}

.toggle-menu:hover{
 background-color: #FE4365;
 transition: all 0.2s ease-in-out;
}

.boxed-item{
 font-family: 'Open Sans';
 font-weight: 200;
 padding: 10px 20px;
 display: inline-block;
 border: solid 2px white;
 box-sizing: border-box;
 font-size: 29px;
 color: white;
 text-align: center;
 margin-top: 70px;
}

.logo-bold{
 font-weight: 800;
}

.logo-title{
 color: white;
 font-family: 'Open Sans';
 font-weight: 200;
 font-size: 20px;
 text-align: center;
 padding: 5px 0;
}

.menu-close{
 color: #D8D8D8;
 position: absolute;
 right: 8px;
 opacity: 0.7;
 top: 6px;
 font-size: 1.1em;
 transition: all 0.3s ease-in-out;
 cursor: pointer;
}

.menu-close:hover{
 color: #FE4365;
 opacity: 1;
 transition: all 0.2s ease-in-out;
}

.navigation-section{
 margin: 20px 0;
 display: block;
 width: 200px;
 margin-left: 25px;
}

.navigation-item{
 font-weight: 200;
 font-family: 'Open Sans';
 color: white;
 padding: 12px 0px;
 box-sizing: border-box; 
 font-size: 14px;
 color: #D8D8D8;
 border-bottom: solid 1px #D8D8D8;
 transition: all 0.3s ease-in-out;
 cursor: pointer;
}

.navigation-item:hover{
 color: white;
 transition: all 0.3s ease-in-out;
}

.boxed-item-smaller{
 font-size: 12px;
 color: #D8D8D8;
 width: 200px;
 transition: all 0.3s ease-in-out;
 cursor: pointer;
 border-width: 1px;
 margin: 0 0 20px 0;
}

.boxed-item-smaller:hover{
 background-color: white;
 color: #111;
 transition: all 0.3s ease-in-out;
}

.hide-menu{
    margin-left: -250px;
}

.opacity-one{
    opacity: 1;
    transform: all 0.3s ease-in-out;
}
```

```html
<!DOCTYPE html>
<html>
    <head>
        <!--Stylesheets-->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

        <link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css">
        <link rel="stylesheet" type="text/css" href="style.css">
        <!-- Scripts-->
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script src="menu.js"></script>
        <title>Coffee note </title>
    </head>
    <body>
        <i class="fa fa-bars toggle-menu"></i>

        <div class="sidebar-menu">
            <i class="fa fa-times"></i>
            <center>
                <a></a><h1 class="boxed-item">Coffe <span class="logo-bold">. note</span></h1>
                </a><h2 class="logo-title">Manage Your Time</h2>
            </center>

            <ul class="navigation-section">
                <li class="navigation-item" id="home">
                    HOME
                </li>
                <li class="navigation-item" id="dashboard">
                    DASHBOARD
                </li>
                <li class="navigation-item" id="weekly_todo">
                    WEEKLY TO-DO
                </li>
                <li class="navigation-item" id="skills">
                    SKILLS
                </li>
                <li class="navigation-item" id="interests">
                    INTERESTS
                </li>
                <li class="navigation-item" id="portfolio">
                    PORTFOLIO
                </li>
                <li class="navigation-item" id="contact">
                    CONTACT
                </li>
            </ul>

            <center>
                <a href="#"><h1 class="boxed-item boxed-item-smaller signup">
                <i class="fa fa-user"></i>
                    SIGN UP
                </h1></a>
            </center>
        </div><!-- End of sidebar -->

        <script src="close_menu.js"></script>
        <script src="menu.js"></script>
        <link rel="stylesheet" type="text/css" href="style.css">

    </body>
</html>
```

I cannot undestand where exactly is the problem and why. In the code there might be some confusing things because I tried many "solutions"and things to fix it but without any result. I will be glad if there is somebody to tell me where is my mistake and how I can fix it..Thank you for your time!