Javascript jquery:$().animate() 不是函数

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/38647190/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 21:41:40  来源:igfitidea点击:

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

javascriptjquery

提问by badperson

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

我正在尝试使用本教程创建一个滑出式切换菜单,出现错误slideoutMenu.animate is not a function

here is the html div in question:

这是有问题的html div:

<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:

这是我的 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);
        }
    });
});

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

我已经尝试了很多东西,将上面的内容包装在一个直接的 javascript 函数中并使用

(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.

但它们都会导致相同的错误。我在 stackoverflow 上发现的与该问题相关的 q 主要指导用户使用“动画”而不是“动画”,或者确保他们使用 jquery obj 而不是 dom obj。

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

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

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

添加控制台日志语句时,console.log($.fn.jquery);我得到:

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.

谢谢。

回答by Kevin B

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.

您似乎在使用 jQuery 3.1.0 的精简版,它不包含大部分库。相反,您应该使用完整版本。

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

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