31

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>
Rory McCrossan
  • 306,214
  • 37
  • 269
  • 303
Duhanes
  • 349
  • 1
  • 3
  • 10

3 Answers3

47

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.

Community
  • 1
  • 1
Ionut
  • 10,249
  • 4
  • 33
  • 62
  • Indeed, it did not show the error anymore. However my popup effect I used with bootstrap has broken down now. I took a look over the article you've sent me, and it specifies breaking changes would occur. I presume it can affect other implementations with bootstrap as well. :( Can you take a look over the code to see if there are any flaws with it ? Merci ! – Duhanes Mar 28 '17 at 11:20
  • @DuhanesAndrei, I'm glad it solved the problem. Regarding the problem you have about the popup, please create a https://jsfiddle.net/ with the whole code or create another question and give me the link and I will try to help you. – Ionut Mar 28 '17 at 11:41
  • Basically I am still trying to make the scroll smooth slide work when clicking on an tag. The fiddle address is https://jsfiddle.net/xczv0kk4/. Thanks so much man! – Duhanes Mar 28 '17 at 13:01
  • @DuhanesAndrei, I don't see any popup there. The fiddle you provided did not included the Bootstrap files or jQuery file. I added them in the fiddle. You mean like when you click the red title should scroll to green one?? Try the update fiddle here https://jsfiddle.net/xczv0kk4/1/ – Ionut Mar 28 '17 at 13:21
  • Man, if you were in Cluj I would've bought you a beer! That's what I wanted to make, a scroll effect. And I didn't add the popups just yet, but I am doing it now, and you can take a look. – Duhanes Mar 28 '17 at 13:27
  • @DuhanesAndrei, :). Sunt in Bucuresti, poate cand o sa ajung prin Cluj :)). I'm glad it helped you and I'm happy to help. – Ionut Mar 28 '17 at 13:34
  • Stiam ca esti roman : )), mizam ca poate esti de pe aici. I have updated the fiddle https://jsfiddle.net/xczv0kk4/2/ . So basically, before changing the jQuery version, the popup worked normally. – Duhanes Mar 28 '17 at 13:36
7

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.

user3669026
  • 131
  • 1
  • 5
1
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>
Sweety Akter
  • 11
  • 2