CODEWITHSUNDEEP
javascriptjquery
Duhanes
Duhanes

Reputation: 399

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>

Upvotes: 35

Views: 43664

Answers (3)

Sweety Akter
Sweety Akter

Reputation: 11

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>

Upvotes: 1

user3669026
user3669026

Reputation: 141

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.

Upvotes: 7

Ionut Necula
Ionut Necula

Reputation: 11472

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.

Upvotes: 51

Related Questions