如何解决在设置 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。