Why is this JQuery error happening? Animate is not a function

I am learning jQuery and trying to work my way around a scroll effect. Anyway, I am trying to make this code work but having trouble in doing so. It breaks when It runs the animate function:

I would really appreciate your help on this one. Thank you.

Uncaught TypeError: $(…).animate is not a function
at HTMLAnchorElement. (script.js:58)
at HTMLDocument.dispatch (jquery-3.1.1.slim.min.js:3)
at HTMLDocument.q.handle (jquery-3.1.1.slim.min.js:3)

// Select anchor tags to click on 
$(document).on("click", "a", function(event) {
  console.log("item clicked");

  // Clear out the default action  
  event.preventDefault();
  console.log("working until now");

  // Animate to selected selected target
  $("html,body").animate({
    scroll: $($(this).attr('href')).offset().top
  }, 900);
  console.log("no errors for now");
});
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script src="javascript/script.js">
</script>

9 thoughts on “Why is this JQuery error happening? Animate is not a function”

  1. It’s because of the jQuery version you use. https://code.jquery.com/jquery-3.1.1.slim.min.js

    slim version of jQuery does not contain all the original jQuery functions.

    You should use a full version. You can download it from here.

    It will help to better understand if you read this article from
    here where at some point in it you will find this statement and I quote:

    Slim build

    Finally, we’ve added something new to this release. Sometimes you
    don’t need ajax, or you prefer to use one of the many standalone
    libraries that focus on ajax requests. And often it is simpler to use
    a combination of CSS and class manipulation for all your web
    animations. Along with the regular version of jQuery that includes the
    ajax and effects modules, we’re releasing a “slim” version that
    excludes these modules. All in all, it excludes ajax, effects, and
    currently deprecated code.

    Reply
  2. slim version will not support some methods hence include this CDN

    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    

    in your project
    and then run your code it will work.

    Reply
  3. It work for me ----> 
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    

    Example:

    <html>
        <title>.....</title>
        <body>
        <!-------------------- scripts --------------------------------->
            <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <!- use this->
    
            <script src="js/navbar-fixed.js"></script>
        </body>
    </html>
    
    Reply

Leave a Comment