67711


以下のようにサイトを作成中です。  
[サンプル](https://codepen.io/fluxus/pen/gPWvZm?__cf_chl_jschl_tk__=6d55cf88a585577dbaa12ba08490e450cc79c7c1-1592207232-0-AXfASKtMs4bt1RJ7cPuIPUWNM9kMfN4QOCN7uBZ5qnHj3rejtFv-
ANlCJYySu_I0TZ6GUN_kAcS0NEhYW2hyY9bIYi8f7kqDNvkqTIo-
dpAUszQlnr3TgVDLAZuoetBSDK2JTpSKUHvMCsDSpMEyEAK8emW9sLYj7_BIwSFTXYp6InYp8cZcRyKIICIToOGuPVat3WndxaBkZ5QVJI6V-2-rWtjpmCkcdXF-U6G6xuvIbY1UwLQyJZ6KfjgdLZTLAnadb5xqGoFeiaQZzlYm5f7Boin8wDe_02wMMC94gloI8Htj45yCM0z_ch819TXifzlVPuyHNuqTXwKuPMXExvT_FAt1iZlsZ549NEPrM_M1)のように三本バーをクリックするとアクションが行われるようにしたいと考えてます。

jsにある `overlay_navigation.velocity('transition.slideLeftIn'` の部分でエラーを起こします。  
出ているエラーは以下になります。

[code]

    script.js:16 Uncaught TypeError: overlay_navigation.velocity is not a function
     at HTMLDivElement.<anonymous> (script.js:16)
     at HTMLDivElement.dispatch (jquery.min.js:3)
     at HTMLDivElement.r.handle (jquery.min.js:3)
    
[/code]

解決方法をご存知の方いらっしゃいましたらご連絡ください。  
よろしくお願いします。

[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]

[code]

    <!doctype html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    
    <link rel="stylesheet" type="text/css" href="https://gigaplus.makeshop.jp/kukunochi/velocity/style.css">
    <script type="text/javascript"　src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript"　src="https://cdnjs.cloudflare.com/ajax/libs/velocity/2.0.6/velocity.min.js"></script>
    <script type="text/javascript"　src="https://cdnjs.cloudflare.com/ajax/libs/velocity/2.0.6/velocity.ui.js"></script>
     
    </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>
    
    </body>
    </html>
[/code]


CC BY-SA 4.0
2020-06-15T07:53:59.470
67677
2020-06-16T06:54:42.713
2020-06-16T06:46:34.137
40597
40597
question
javascript jquery css
Uncaught TypeError: overlay_navigation.velocity is not a functionのエラーについて


おそらくですが、HTTPS通信のブラウザで接続しているのに読み込んでいるリソースがHTTPだから読み込みがブラウザでできなくなっているようです。

> <http://julian.com/research/velocity/>

このURLはCDNではなくて、サイトから持ってきているようで、HTTPしか受け付けられないようです。

きちんとCDNが公開されているようなのでそちらを利用されるか  
<https://cdnjs.com/libraries/velocity>

ダウンロードしてローカルにて利用するようにしてください。

追記  
scriptタグをきちんと記述すれば該当のエラーは出なくなりました。  
別のエラーが出ていますが、これはvelocityJSの使い方が間違っていそうです。  
公式ドキュメントを確認して修正する必要があるでしょう。

追記2  
よく見たらjqueryが2つインストールされていますね。  
1.12の方は削除しました。

[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]

[code]

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/2.0.6/velocity.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/2.0.6/velocity.ui.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://gigaplus.makeshop.jp/kukunochi/velocity/style.css">
    
    <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>
[/code]


CC BY-SA 4.0
2020-06-16T06:34:05.763
67711
2020-06-16T06:54:42.713
2020-06-16T06:54:42.713
22665
22665
67677
answer