nav animation problem

by Trucino

HTML

<div id="menumobile" class="hidden-lg hidden-xl container-fluid">    

      <div id="clicktoopenmenu"><img class="hamburger animation img-responsive" src="css/imgs/mnaviconopen.svg"></div> 
      <div id="clicktoclosemenu"><img class="hamburger animation img-responsive" src="css/imgs/mnaviconclose.svg"></div>
            
      <div class="mobilenavlist closemobilemenu">
            <a href="#section2"><div class="mobilezalozka twhite">Portfolio</div></a>
            <a href="#section3"><div class="mobilezalozka twhite">Služby</div></a>
            <a href="#section4"><div class="mobilezalozka twhite">Kontakt</div></a>
      </div>
            
</div>

CSS

#menumobile{
  Position: fixed;
  Top:0px;
  Width:100%;
  height: 80px;
  z-index: 100;
  background:red;
}

.hamburger{
  max-width:60px;
  position:absolute;
  left: 0px;
  left: 0px;
  margin: 10px 10px;
  opacity: 1;
  }
  
#clicktoopenmenu{
  Color: white;
}

#clicktoclosemenu{
  display: none;
} 

.mobilenavlist{
  height:100%; 
  width:100%;
  background: rgb(40, 39, 45);
  z-index: 50;
  position: fixed;
  top: 0%;
  display: none;
  opacity: 0;
  z-index: -1;
  transition: 2s;
  
}

.mobilezalozka{
text-align: center;
margin-top: 20vh;
color:white;
}

JavaScript

$("#clicktoopenmenu").on("click", function() {  
    $("#clicktoclosemenu").css({ display: "block" });
    $(".mobilenavlist").css({ 'display': 'block', 'opacity': '1'});
    $("#clicktoopenmenu").css({ display: "none" });
});

$("#clicktoclosemenu").on("click", function() {
    $("#clicktoclosemenu").css({ display: "none" });
    $(".mobilenavlist").css({ 'opacity': '0', 'display': 'none'});
    $("#clicktoopenmenu").css({ display: "block" });
});