How to set menu animation in jquery?

Question

JavaScript

$('.icon-burger').click(function(){
  $('.icon-burger').toggleClass('burger-active');
  $('.header-container').toggleClass('header-container-active');
  $('.menu').toggleClass('menu-active');
});

how to make ul with class menu appear smoothly when icon-burger is clicked.

Answer 1

$('.icon-burger').click(function(){
  $('.icon-burger, .header-container, .menu').fadeToggle();
  ...
});

But kosher, it seems to me, is to solve with CSS and not with jQuery animation

$('.icon-burger').click(function(){
  $('.icon-burger, .header-container, .menu').toggleClass('active');
});

.icon-burger, .header-container, .menu {
   opacity: 0%;
   transition: 1s;
}

.active {
   opacity: 100%;
   transition: 1s;
}

But when loading the page, you will need to disable the transition. This is a separate story, I do not write here.

Answer 2

https://www.w3schools.com/jquery/jquery_fade.asp