54

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.

8
  • uhm... that doesn't make sense, given your code. the error that is. it shouldn't be happening.
    – Kevin B
    Commented Jul 28, 2016 at 21:42
  • html added, bad spacing before
    – badperson
    Commented Jul 28, 2016 at 21:44
  • 1
    what does console.log($.fn.jquery) give you?
    – Kevin B
    Commented Jul 28, 2016 at 21:44
  • 2
    What version jquery and jquery UI did you use? I think I recall having an issue with this with an incompatible jquery version...
    – Nikki9696
    Commented Jul 28, 2016 at 21:45
  • 3
    well, the problem is you're using the slim version of jquery 3.1.0, you need the full version. the hint is in all the -ajax things in the version property. Those are all the things not included.
    – Kevin B
    Commented Jul 28, 2016 at 21:49

1 Answer 1

181

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

1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.