jQuery: $().animate()不是一个函数。

54

我已经进行了相当多的搜索,但仍无法找到答案,所以就来问一下。

我正在尝试使用此教程创建一个滑出式切换菜单,但是出现了错误slideoutMenu.animate不是一个函数

这里是相关的 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>

这是我的 JavaScript 函数:

$(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主要是指导用户使用'animate'而不是'animated'或确保他们使用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
感谢。

嗯...根据你的代码,这不合理。出现错误是不应该的。 - Kevin B
1
console.log($.fn.jquery)会给你什么结果? - Kevin B
2
你使用了哪个版本的jquery和jquery UI?我记得曾经遇到过这个问题,可能是因为不兼容的jquery版本引起的... - Nikki9696
这是版本问题。我添加了一个旧版的jQuery,问题得到解决。您可以将其作为答案发布,我会接受的。 - badperson
3
问题是你正在使用JQuery 3.1.0的精简版,你需要完整版。版本属性中的所有“-ajax”提示都在示意这些未包含的内容。 - Kevin B
显示剩余3条评论
1个回答

180

3
最新版本可以在此处找到:https://developers.google.com/speed/libraries/。 - Josh

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接