Question

我是第一次尝试使用 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,
           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');
           }
         });
       }
     })
   }
 })

Answer 1

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

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

在设置 Velocity Js 时遇到问题

1 个答案: