jQuery menu animation only working on second click

Question

I'm creating a menu that appears after a click on the hamburger button, (upper right corner) and I'm trying to use the jQuery function to slide it in rather than just having it appear.

The issue I'm having is that it only seems to activate the sliding bit on the second attempt.

I've seen a bunch of other questions about this but the answers are either "you've got a specific error in your code" or "you have to toggle or otherwise fake the animation on page load". I'm hoping my code is error-free and I'm not really keen to use a toggle hack just to bypass the first animation no-show.

Presumably, this is supposed to work the first time & every subsequent time.

  $('.navTrigger').click(function () {
  $(this).toggleClass('active');
  $("#mainListDiv").toggleClass("show_list").fadeIn(0);
  $('li').toggleClass('logo2314441-mobile');
  $('li').toggleClass('li-mobile');
});

UPDATE: I also tested with this other snippet, but still not working, unfortunately...

$('.navTrigger').click(function () {
  $(this).toggleClass('active');
  $("#mainListDiv").fadeIn(0, function(){
    $("#mainListDiv").toggleClass("show_list");
  });
  $('li').toggleClass('logo2314441-mobile li-mobile');
});

.nav div.main_list ul {
   width: 100%;
  padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
    justify-content: space-between;
    flex: 1;
 
    -webkit-transition: opacity .4s ease .1s,-webkit-transform 1s cubic-bezier(.23,1,.32,1);
    transition: opacity .4s ease .1s,-webkit-transform 1s cubic-bezier(.23,1,.32,1);
    transition: opacity .4s ease .1s,transform 1s cubic-bezier(.23,1,.32,1);
    transition: opacity .4s ease .1s,transform 1s cubic-bezier(.23,1,.32,1),-webkit-transform 1s cubic-bezier(.23,1,.32,1);
    
    transform: translateY(-140px);
}

.nav div.show_list ul {
    overflow: hidden;
    display: block;
    -webkit-transition: opacity .4s ease .1s,-webkit-transform 1s cubic-bezier(.23,1,.32,1);
    transition: opacity .4s ease .1s,-webkit-transform 1s cubic-bezier(.23,1,.32,1);
    transition: opacity .4s ease .1s,transform 1s cubic-bezier(.23,1,.32,1);
    transition: opacity .4s ease .1s,transform 1s cubic-bezier(.23,1,.32,1),-webkit-transform 1s cubic-bezier(.23,1,.32,1);
      
      transform: translateY(0px);
}

my question is: How do I get the animation to work first time without an onload fix/hack? Thanks in advance.

Answer 1

Test with this:

$('.navTrigger').click(function () {
  $(this).toggleClass('active');
  $("#mainListDiv").fadeIn(0, function(){
    $("#mainListDiv").toggleClass("show_list");
  });
  $('li').toggleClass('logo2314441-mobile li-mobile');
});

The callback will be triggered as soon as the Fade In is complete. Now the list will be visible and then the class is added, so the animation should start.