Slide in menu (in wordpress theme) with jQuery with CSS animation

Question

trying to make this menu slide in and then slide out when the close button is clicked. For some reason I am unable to get it to slide out.

    jQuery(function($){
    $('#menu-open').click(function() {
        $('#slider-background').toggleClass('section-transform-active');
        $('#slider-menu').toggleClass('menu-container-active');
    });
    $('#menu-close').click(function() {
        $('#slider-background').toggleClass('section-transform-active');
        $('#slider-menu').toggleClass('menu-container-active');
    });
});

/button>



<div id="slider-background" class="section-transform">
      <button id="menu-close" style="float:right">X CLOSE</button>
  <div id="slider-menu" class="menu-container">
  <ul>
  <li>MENU ITEM 1</li>
    <li>MENU ITEM 2</li>
      <li>MENU ITEM 3</li>
        <li>MENU ITEM 4</li> 
  </ul>
  </div>
</div>

.section-transform {
    cursor: pointer;
  opacity: 0;
  -webkit-transition: width 1s ease;
    -moz-transition: width 1s ease;
    -o-transition: width 1s ease;
    -ms-transition: width 1s ease;
    transition: width 1s ease;
 }
  
.menu-container {
  padding-top: 50px;
  color: #888;
  font-size: 20px;
  opacity: 0;
}
  
.menu-container li:hover {
  color: #aaa;
}
  
.menu-container-active {
    opacity: 1;
    height: 100%;
    width: 100%;
}
  
.section-transform-active {
  opacity: 1;
    height: 100%;
    width: 50%;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.8); 
}

My fiddle : https://jsfiddle.net/sad437xv/38/

In the jsfiddle I am unable to make it slide in or out. it just pops in/out. I seem to be unable to replicate the Divi builder structure too well. I would like the menu text/buttons also to slide in with the background overlay - at present the way it goes from width:0 to 50% it makes all the letters of the menu items jiggly animate as their box width expands which looks weird.

Can anyone help to show where I am going wrong here? Thanks

Answer 1

You can use slideToggle() check below snippet.

$(function($){
    $('#menu-open').click(function() { 
        $('#slider-background').animate({width:'toggle'}, 250);
    });
    $('#menu-close').click(function() { 
        $('#slider-background').animate({width:'toggle'}, 250);
    });
});

.section-transform { display:none; }
.menu-container { padding-top: 50px; color: #888;font-size: 20px;}
.menu-container li:hover {color: #aaa;}
.menu-container-active {opacity: 1;height: 100%;width: 100%;}
.section-transform-active {opacity: 1;height: 100%;width: 50%;z-index: 99999;background: rgba(0, 0, 0, 0.8);}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="menu-open">MENU OPEN</button>
<div id="slider-background" class="section-transform">
  <button id="menu-close" style="float:right">X CLOSE</button>
  <div id="slider-menu" class="menu-container">
    <ul>
      <li>MENU ITEM 1</li>
      <li>MENU ITEM 2</li>
      <li>MENU ITEM 3</li>
      <li>MENU ITEM 4</li> 
    </ul>
  </div>
</div>