Can't use ajax POST and jquery animation simultaneously (using Bootstrap)

Question

I am using a Bootstrap Template that has a sidebar, and when the user clicks on .nav-menu (or Company Name in the template), the sidebar hides/unhides.

$(document).ready(function () {

    $( '.nav-menu' ).click(function() {
         event.preventDefault();
         if($( '.nav-menu-item' ).is(":visible")){
              $('.nav-menu-item' ).hide('slide', {direction:'left'}, 1000);
              $('#menu-item-container').addClass('sidebar-hidden');
         } else{
              $('.nav-menu-item' ).show('slide', {direction:'left'}, 1000);
              $('#menu-item-container').removeClass('sidebar-hidden');  
         }
    });
});

The code above works fine.

The problem comes when I try to include an ajax post like below:

$(document).ready(function () {

    $( '.nav-menu' ).click(function() {
         event.preventDefault();
         if($( '.nav-menu-item' ).is(":visible")){
              $('.nav-menu-item' ).hide('slide', {direction:'left'}, 1000);
              $('#menu-item-container').addClass('sidebar-hidden');

              $.ajax({
                url:'/userSettings',
                type:'POST',
                data:{'sidebar':'0'}
              });


         } else{
              $('.nav-menu-item' ).show('slide', {direction:'left'}, 1000);
              $('#menu-item-container').removeClass('sidebar-hidden'); 

              $.ajax({
                url:'/userSettings',
                type:'POST',
                data:{'sidebar':'1'}
              });

         }
    });
});

I added this in my public/js folder and added the following to the footer:

<script type="text/javascript" src="js/jquery-3.3.1.js"></script>

Now the ajax POST works fine (except that I have to double click on .nav-menu ) but the show/hide animation doesn't work correctly!

This $('.nav-menu-item' ).hide('slide', {direction:'left'}, 1000); part of the code doesn't work at all!

This is the error in the Chrome console (there is 7270 of these):

jquery-3.3.1.js:6710 Uncaught TypeError: jQuery.easing[this.easing] is not a function
    at init.run (jquery-3.3.1.js:6710)
    at tick (jquery-3.3.1.js:7094)
    at Function.jQuery.fx.tick (jquery-3.3.1.js:7436)
    at schedule (jquery-3.3.1.js:6813)

Not sure if this is relevant, but this is the entire footer:

//bootstrap required
<script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.9.0/feather.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
//bootstrap required

<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script src="js/dashboard.js"></script>
<script src="js/jquery.js"></script>
</body>
</html>

Answer 1

The jQuery hide() documentation shows that the signature of hide with 3 arguments is hide( duration, easing, complete) where easing and complete are functions. You are passing three arguments. The first one is just handled with a fallback by jQuery but the second one, easing, is expecting a function and you have passed an object.

Maybe it only seemed to be working before adding the ajax code. Perhaps you were getting errors then too but they weren't stopping additional code from running.