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

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

这是有问题的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>

这是我的 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 函数中并使用

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

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

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

添加控制台日志语句时，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

谢谢。