jquery : $().animate() is not a function

JavascriptJquery

Javascript Problem Overview


I've done quite a bit of searching and was not able to find an answer to my question, so here goes.

I am trying to create a slideout toggle menu with this tutorial, and I'm getting an error slideoutMenu.animate is not a function

here is the html div in question:

<div id="corner-button"><a href="#" class="slideout-menu-toggle">myLink</a></div>

	<div class="slideout-menu">
			<h3><a href="#" class="slideout-toggle">Toggle</a></h3>
			<ul>
				<li>Add new task</li>
				<li>See completed tasks</li>
				<li>Go to metrics page</li>
			</ul>
		</div>

and here is my js function:

$(document).ready(function(){
    $('.slideout-menu-toggle').on('click', function(event){
	    event.preventDefault();
	    console.log("in the toggle func");
			var slideoutMenu = $(".slideout-menu");
			var slideoutMenuWidth = $(".slideout-menu").width();
			console.log("width : " + slideoutMenuWidth);
			slideoutMenu.toggleClass("open");
	
			if(slideoutMenu.hasClass("open")){
				console.log("open....");
				slideoutMenu.animate({
					left: "0px"
				}, 500);
			} else {
				slideoutMenu.animate({
				left: -slideoutWidth
				}, 250);
		}
	});
});

I've tried a number of things, wrapping the above within a straight javascript function and using

(function($){
    // code here
})

but they all result in the same error. The q's I found related to that issue here on stackoverflow mainly directed users to have 'animate' instead of 'animated' or to make sure they use a jquery obj and not a dom obj.

Browsed thru quite a few others, but they just variations on what I had already done. tested in firefox and chrome.

when adding a console log statement console.log($.fn.jquery); I get:

3.1.0 -ajax,-ajax/jsonp,-ajax/load,-ajax/parseXML,-ajax/script,-ajax/var/location,-ajax/var/nonce,-ajax/var/rquery,-ajax/xhr,-manipulation/_evalUrl,-event/ajax,-effects,-effects/Tween,-effects/animatedSelector,-deprecated

thanks.

Javascript Solutions


Solution 1 - Javascript

You appear to be using the slim build of jQuery 3.1.0, which doesn't include most of the library. Instead, you should be using the full version.

https://code.jquery.com/jquery-3.1.0.js

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionbadpersonView Question on Stackoverflow
Solution 1 - JavascriptKevin BView Answer on Stackoverflow