Javascript 仅在第二次单击时使用jQuery菜单动画

我正在创建一个菜单，它在单击汉堡按钮（右上角）后显示，我正在尝试使用jQuery函数将其滑入，而不仅仅是让它出现

我遇到的问题是，它似乎只在第二次尝试时激活滑动钻头

我已经看到了很多关于这方面的其他问题，但答案要么是“你的代码中有一个特定的错误”，要么是“你必须切换或在页面加载时伪造动画”。我希望我的代码是无错误的，我不是真的热衷于使用切换黑客只是为了绕过第一个动画没有显示

据推测，这应该在第一次起作用&以后的每一次

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

更新： 我也测试了其他的代码片段，但仍然不起作用，不幸的是

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

我的问题是：如何在没有加载修复/破解的情况下让动画第一次工作？提前感谢。

用以下方法进行测试：

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

---

淡入完成后将立即触发回调。现在，列表将可见，然后添加类，因此动画应该开始。

在FireFox中，当我单击菜单时，它会在第一次单击时出现。是@twisty，但单击两次，您将获得动画。4s按原样轻松过渡，不幸的是，它只在第二次单击时起作用。我怀疑这是由于

.fadeIn（）

添加类后。动画正在发生，但项目可能不可见。也许可以将

.toggleClass（）

移动到淡入回调中。谢谢@twisty你能给我看一个代码中的示例吗？这将非常有帮助：）有什么想法吗？我会留下你的代码，所以你也可以检查你是否want@CAT彡 有很多额外的代码，可能还有其他冲突。你能举一个最小的、可重复的例子吗：

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