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="http://luke.g6.cz/css/imgs/mnaviconopen.svg"></div>
            
            <div id="clicktoclosemenu"><img class="hamburger animation img-responsive" src="http://luke.g6.cz/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, #clicktoclosemenu{
  Color: white;
}

#clicktoclosemenu,
#menumobile.opened #clicktoopenmenu {
  display: none;
} 

#menumobile.opened #clicktoclosemenu {
  display: block;
} 

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

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



@media (max-width: 767px) {
.mobilezalozka{font-size: 12vw; margin-top: 35%;}
#section2{height:55px;}
.headercontent span {font-size: 22px; border-radius: 4px; padding: 13px 30px 16px 30px; letter-spacing: 0.07em;}
.btnincover {margin-bottom: 0%;}
}

@media (max-width: 767px) and (orientation : landscape){
.mobilezalozka{font-size: 6vw; margin-top: 8%;}
.btnincover {margin-bottom: -6%;}}
}

JavaScript

$("#clicktoopenmenu").on("click", function() {  
 		$(this).parents('#menumobile').addClass('opened');
    $(".mobilenavlist").slideDown();
});

$("#clicktoclosemenu").on("click", function() {
 		$(this).parents('#menumobile').removeClass('opened');
    $(".mobilenavlist").slideUp();
});


/*
$("#clicktoopenmenu").on("click", function() {  
 		$(this).parents('#menumobile').addClass('opened');
    $(".mobilenavlist").slideDown();
});

$("#clicktoclosemenu").on("click", function() {
 		$(this).parents('#menumobile').removeClass('opened');
    $(".mobilenavlist").slideUp();
});

*/
/*
$('.hamburger').on("click", function() {  
 		$(this).parents('#menumobile').toggleClass('opened');
    $(".mobilenavlist").slideToggle();
});

*/

/*
$('.hamburger').on("click", function() {  
 		var menu = $(this).parents('#menumobile').toggleClass('opened');
    if (menu.hasClass('opened')) {
      $(".mobilenavlist").slideDown();
    } else {
      $(".mobilenavlist").slideUp();
    }
});


$('.hamburger').on("click", function() {  
 		var menu = $(this).parents('#menumobile').toggleClass('opened'),
    		fce = menu.hasClass('opened') ? 'slideDown' : 'slideUp';
		$(".mobilenavlist")[fce]();
});
*/