

javascriptとjQueryを使ってHPを作成中です。  
両言語とも初心者です。  
jQueryは2つ以上読み込まない方がいいと言うのもあるみたいですが  
今回は[こちら](https://codepen.io/fluxus/pen/gPWvZm)にあるサイトの動きを模倣したいと考えてます。

ソースが載ってるGitHubにはjQueryを以下の通り2つ読み込んでるように思えます。

[code]

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="http://julian.com/research/velocity/build/jquery.velocity.min.js"></script>
    
[/code]

複数のjQueryを読み込む場合は `jQuery.noConflict(true)`
と言う魔法の言葉あると参考にしたQiitaの記事で言われていたので試してみましたが、動きませんでした。  
多分、書き方が悪いのだと思うのですが、、、

[（良くないけど）ページに複数のjQueryを読み込む。 -
Qiita](https://qiita.com/mijabi/items/c68d27bc2ea5642675af)

/hoge/script.jsをロードしようとすると `Uncaught ReferenceError: $ is not defined`
と言われてしまいます。

どなたか解決策をご存知の方いらっしゃったら、ご教授よろしくお願いします。  
まず、jQueryは2つ以上読み込まないと言うお話も

[code]

    <!doctype html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="shortcut icon" type="image/ico" href="favicon_url">
    <meta property="og:type" content="website">
    <meta property="og:title" content="title">
    <meta property="og:description" content="description">
    <meta property="og:site_name" content="page.name">
    <meta name="twitter:card" content="Summary with Large Image">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="./page.css">
    <link rel="stylesheet" type="text/css" href="https://hoge.jp/hoge/hoge/style.css">
    </head>
    <body>
    <div class="overlay-navigation">
      <nav role="navigation">
        <ul>
          <li><a href="#" data-content="The beginning">Home</a></li>
          <li><a href="#" data-content="Curious?">About</a></li>
          <li><a href="#" data-content="I got game">Skills</a></li>
          <li><a href="#" data-content="Only the finest">Works</a></li>
          <li><a href="#" data-content="Don't hesitate">Contact</a></li>
        </ul>
      </nav>
    </div>
      <div class="open-overlay">
        <span class="bar-top"></span>
        <span class="bar-middle"></span>
        <span class="bar-bottom"></span>
      </div>
    
    
    <script type="text/javascript"　src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript"　src="http://julian.com/research/velocity/build/jquery.velocity.min.js"></script>
    <script type="text/javascript"　src="http://julian.com/research/velocity/build/velocity.ui.js"></script>
    <script type="text/javascript" src="/hoge/script.js"></script>
    </body>
    </html>
    
    
[/code]

/hoge/script.js

[code]

    $(function(){ ←エラーが発生しているところ。
         $('.open-overlay').click(function() {
           $('.open-overlay').css('pointer-events', 'none');
           var overlay_navigation = $('.overlay-navigation'),
             top_bar = $('.bar-top'),
             middle_bar = $('.bar-middle'),
             bottom_bar = $('.bar-bottom');
    
           overlay_navigation.toggleClass('overlay-active');
           if (overlay_navigation.hasClass('overlay-active')) {
    
             top_bar.removeClass('animate-out-top-bar').addClass('animate-top-bar');
             middle_bar.removeClass('animate-out-middle-bar').addClass('animate-middle-bar');
             bottom_bar.removeClass('animate-out-bottom-bar').addClass('animate-bottom-bar');
             overlay_navigation.removeClass('overlay-slide-up').addClass('overlay-slide-down')
             overlay_navigation.velocity('transition.slideLeftIn', {
               duration: 300,
               delay: 0,
               begin: function() {
                 $('nav ul li').velocity('transition.perspectiveLeftIn', {
                   stagger: 150,
                   delay: 0,
                   complete: function() {
                     $('nav ul li a').velocity({
                       opacity: [1, 0],
                     }, {
                       delay: 10,
                       duration: 140
                     });
                     $('.open-overlay').css('pointer-events', 'auto');
                   }
                 })
               }
             })
    
           } else {
             $('.open-overlay').css('pointer-events', 'none');
             top_bar.removeClass('animate-top-bar').addClass('animate-out-top-bar');
             middle_bar.removeClass('animate-middle-bar').addClass('animate-out-middle-bar');
             bottom_bar.removeClass('animate-bottom-bar').addClass('animate-out-bottom-bar');
             overlay_navigation.removeClass('overlay-slide-down').addClass('overlay-slide-up')
             $('nav ul li').velocity('transition.perspectiveRightOut', {
               stagger: 150,
               delay: 0,
               complete: function() {
                 overlay_navigation.velocity('transition.fadeOut', {
                   delay: 0,
                   duration: 300,
                   complete: function() {
                     $('nav ul li a').velocity({
                       opacity: [0, 1],
                     }, {
                       delay: 0,
                       duration: 50
                     });
                     $('.open-overlay').css('pointer-events', 'auto');
                   }
                 });
               }
             })
           }
         })
         });
    
[/code]


CC BY-SA 4.0
2020-06-11T10:53:17.310
67542
2020-06-11T11:40:33.580
2020-06-11T11:40:33.580
3060
40597
question
javascript jquery
Uncaught ReferenceError: $ is not defined とjQueryの読み込みについて