CSS3 animation with jQuery

Question

This one is a bit of a long shot but here goes - I'm new to css3 animation so please bare with..

Codepen link

  $(document).ready(function(){ $("#menu").mmenu({ extensions : [ "theme-dark", "effect-slide-menu", "effect-slide-listitems" ], iconPanels : { add : true, visible : 1, hideNavbars : true } }) $("#hamburger").click(function(){ $(".burger .one, .burger .two, .burger .three, .circle").css("-webkit-animation-play-state", "running"); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.3.1/js/jquery.mmenu.min.all.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.3.1/css/jquery.mmenu.all.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="page"> <div class="header"> <a href="#menu" id="hamburger"> <div class="burger"> <div class="one"></div> <div class="two"></div> <div class="three"></div> </div> <div class="circle"></div> </a> Demo </div> <div class="content"> <p><strong>This is a demo.</strong><br /> Click the menu icon to open the menu.</p> </div> </div> <!-- The page End--> <!-- The menu --> <nav id="menu"> <ul> <li><a href="/">Home</a></li> <li><a href="/about">About us</a> <ul> <li><a href="/about/history">History</a></li> <li><a href="/about/team">The team</a></li> <li><a href="/about/address">Our address</a></li> </ul> </li> <li><a href="/contact">Contact</a></li> </ul> 

When the hamburger menu opens the animation starts on the icon but then when you close it the animation stays at the open state. I want it to return to the original state

Thanks in advance

Answer 1

Use the mousedown event of the mm-blocker to reset the previous style. I used animation direction reverse to do it. Here's the codepen http://codepen.io/anon/pen/gpoPqQ

     $("#mm-blocker").on( "mousedown",function(){
     $(".burger .one, .burger .two, .burger  .three, .circle").css("-webkit-animation-direction", "normal");
    } );


        $("#hamburger").click(function(){
        $(".burger .one, .burger .two, .burger  .three, .circle").css("-webkit-animation-direction", "reverse");
        $(".burger .one, .burger .two, .burger  .three, .circle").css("-webkit-animation-direction", "running");

       });