title: Page switching script issue
body: <p>this is this my first stack overflow post so I hope I will fullfill the requirements of a good topic. But, I'm french so I apologize if some things are not explained properly.  </p>
  
  <p>Just to let you know, I'm pretty new to web development. I've started a few months ago by learning basics of html ccs JavaScript (+JQuery) for a month beside of my job. Then, I've started to develop a website for 2 twitch streamers  (with little viewer average). Here is the link if you want to check (so you will be able to see the issue I'm talking about): ponceriv.fr</p>
  
  <p>Has the website is quite light, I've decided to make a "monopage" structure as I'm using a single html file (index.html) and I use Jquery to manipulate the DOM in order to switch pages.</p>
  
  <p>Here is a part of the script (you can directly check in the core-handler.js) :</p>
  
  <pre><code>// When the user clicks on a nav button
  $('.nav-item-container').click(function () {
      //remove the Nav-active class from nav button previously active
      $('.nav-item-container').removeClass('nav-active');
  ....
  ....
      // the clicked nav button is the second one
      if ($(this).attr('id') == 'nav-item-container-2') {
          // the new active page is the second one / the "about" page
          let $newActiveWrapper = $('.about-wrapper');
          // the nav button that will have the active design
          let $toActiveNav = $('#nav-item-container-2');
          // Check if this page is already active
          if ($activeWrapper.attr('id') == $newActiveWrapper.attr('id')) {
              // re-set the class nav-active on the same button (I know, this is not optimal)
              $toActiveNav.addClass('nav-active');
              // If not already active
          } else {
              // The nav button get the 
              $toActiveNav.addClass('nav-active');
              // Prepare the css properties for the "enter" animation of the new page
              $newActiveWrapper.css({
                  opacity: '0',
                  position: 'relative',
                  top: '100px',
                  left: '0'
              });
  
              // Hide overflow because the animation makes scrollbar visible
              $('#content').css({
                  'overflow': 'hidden'
              });
  
              // Check if the page is a secondary content (=/= stream player page) so we'll make the mini twitch player display
              if ($('.secondary-content').css('display') == 'none') {
  
                  // Prepare the css properties for the "enter" animation of the mini player
                  $('.twitch-mini-player').css({
                      opacity: '0'
                  });
  
                  // "Leaving" animation of the current page then "Enter" animation of the new page + Deleting the iframe of the twitch main player
                  $activeWrapper.animate({
                      left: '600px',
                      opacity: '0'
                  }, 500, function () {
                      $activeWrapper.css({
                          display: 'none'
                      });
                      $('.secondary-content').css({
                          display: 'flex'
                      });
                      $newActiveWrapper.css({
                          display: 'block'
                      });
                      $newActiveWrapper.animate({
                          opacity: '1',
                          top: '0'
                      }, 500);
                      $('#twitch-embed').remove();
                  });
  
                  // New "state" variable values + display mini player + "enter" animation of mini player
                  setTimeout(function () {
                      $activeNav = $toActiveNav;
                      $activeWrapper = $newActiveWrapper;
                      $('.twitch-mini-player').append(twitchPlayerSnippet);
  
                      // calling a function declared somewhere else in the script
                      displayTwitch();
                      $('#content').css({
                          'overflow': 'visible'
                      });
                      $('.twitch-mini-player').delay(250).animate({
                          opacity: '1'
                      });
                  }, 1050);
  
              // If we were already in a secondary content
              } else {
  
                  //pretty much the same than earlier but without main player and mini player modifications
                  $activeWrapper.animate({
                      left: '600px',
                      opacity: '0'
                  }, 500, function () {
                      $activeWrapper.css({
                          display: 'none'
                      });
                      $newActiveWrapper.css({
                          display: 'block'
                      });
                      $newActiveWrapper.animate({
                          opacity: '1',
                          top: '0'
                      }, 500);
                  });
  
                  setTimeout(function () {
                      $activeNav = $toActiveNav;
                      $activeWrapper = $newActiveWrapper;
                      $('#content').css({
                          'overflow': 'visible'
                      });
                  }, 1050);
              }
          }
      }
  </code></pre>
  
  <p>There is 3 other scripts like this one for the other pages. </p>
  
  <p>So here is the thing, if you click quickly on one secondary content's nav button then another, both pages are getting displayed spliting the website content frame in 2 50% width frames.</p>
  
  <p>I've been searching for what cause this problem for a few days but I really can't figure it out...</p>
  
  <p>I know all of this is really sub optimal, but it's the "purpose" of this website, start from very basic knowledge and upgrade it step by step while learning new things.</p>