jquery：$（）。animate（）不是函数 [英] jquery : $().animate() is not a function

问题描述

我已经做了很多搜索，无法找到我的问题的答案，所以这里有。

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

我正在尝试使用本教程，我收到错误 slideoutMenu.animate不是函数

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

这里是问题的html div：

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>

这是我的js函数：

$(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);
        }
    });
});

我尝试了很多东西，将上面的内容包含在一个简单的javascript函数中并使用

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

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

但它们都会导致相同的错误。我在堆栈溢出中发现与此问题相关的问题主要是指导用户使用动画代替动画，或者确保他们使用jquery obj而不是dom obj。

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.

浏览了很多其他人，但他们只是改变了我已经做过的事情。在firefox和chrome中测试过。

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

添加控制台日志语句 console.log（$。fn.jquery）; 我得到：

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

谢谢。

推荐答案

您似乎正在使用jQuery 3.1.0的超薄版本，它不包含大部分库。相反，您应该使用完整版。

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

这篇关于jquery：$（）。animate（）不是函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！