在设置 Velocity Js 时遇到问题

问题描述

我是第一次尝试使用 VeLocity Js，但无法正常工作。下面是我正在尝试创建的导航菜单。除了 VeLocity Js 位之外，代码中的所有内容都可以正常工作。菜单的动画甚至可以工作，但菜单没有打开。我包括了 VeLocity JS 站点告诉我要包括的两个链接，以及一个到 veLocity.min 的页面链接。 js。我尝试使用一种或另一种，或两者都使用，但没有任何效果。我在这里遗漏了什么或做错了什么？

HTML：

    <head>
    <Meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    <title>Testing VeLocity JS</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="//cdn.jsdelivr.net/npm/veLocity-animate@2.0/veLocity.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/veLocity-animate@2.0/veLocity.ui.min.js"></script>
    <scrpt src="veLocity.min.js"></scrpt>
    <script src="navmenutest.js" async></script>
</head>
<body>
    <script>document.body.classList.add('fade');</script>
    <div id="container">
        <div class="overlay-navigation">
            <nav role="navigation">
                <ul>
                    <li><a href="gallery" data-content="gallery Test">gallery</a></li>
                    <li><a href="blog" data-content="Blog Test">Blog</a></li>
                    <li><a href="about" data-content="About Test">About</a></li>
                    <li><a href="contact" data-content="Contact Test">Contact</a></li>
                    <li><a href="custompcs" data-content="Custom PC's Test">Custom PC's</a></li>
                </ul>
            </nav>
        </div>
        <section class="home">
            <div class="open-overlay">
                <span class="bar-top"></span>
                <span class="bar-middle"></span>
                <span class="bar-bottom"></span>
            </div>
        </section>

JS：

     $('.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,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,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');
           }
         });
       }
     })
   }
 })

解决方法

您拼错了 scrpt 关键字，它应该是 script。

<script src="velocity.min.js"></script>

javascript jquery velocity velocity