Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>
like image 655
Duhanes Avatar asked Mar 28 '17 10:03

Duhanes


People also ask

How can use a animate () method in jQuery?

The animate() is an inbuilt method in jQuery which is used to change the state of the element with CSS style. This method can also be used to change the CSS property to create the animated effect for the selected element. Syntax: (selector).

What is animation function in jQuery?

Definition and Usage. The animate() method performs a custom animation of a set of CSS properties. This method changes an element from one state to another with CSS styles. The CSS property value is changed gradually, to create an animated effect. Only numeric values can be animated (like "margin:30px").

What is the correct syntax to call the jQuery animate () function?

jQuery Animations - The animate() Method The jQuery animate() method is used to create custom animations. Syntax: $(selector). animate({params},speed,callback);

Can the jQuery animate () method be used to animate any CSS property?

The animate() method is typically used to animate numeric CSS properties, for example, width , height , margin , padding , opacity , top , left , etc. but the non-numeric properties such as color or background-color cannot be animated using the basic jQuery functionality. Note: Not all CSS properties are animatable.


2 Answers

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.

like image 166
Ionut Avatar answered Sep 20 '22 14:09

Ionut


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.

like image 38
user3669026 Avatar answered Sep 17 '22 14:09

user3669026