[解決済み] jquery : $().animate() は関数ではありません。

質問

かなり検索してみたのですが、なかなか答えが見つからなかったので、ここで質問させていただきます。

スライドアウト・トグル・メニューを作成しようとしています。 このチュートリアル というエラーが発生します。 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&Aでは、主に「animated」ではなく「animate」を使用するように、またはdom objではなくjquery objを使用するようにと指示されています。

他のものもいくつか閲覧しましたが、それらは私がすでに行ったことのバリエーションに過ぎませんでした。

コンソールログ文を追加する場合 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

ありがとうございます。

どのように解決するのですか？

jQuery 3.1.0のスリムビルドを使用しているようですが、このビルドにはライブラリのほとんどが含まれていません。代わりに、フルバージョンを使用する必要があります。

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