点击激活class="animate__animated animate__bounce“
我正在学习html和css，我想使用这个库：https://animate.style/
我有这个密码
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>https://codepen.io/wmfznuiy-the-looper/pen/jOaMXXg
努埃斯特
我希望这个效果在点击时起作用。我用了这段代码，但它不起作用
$("#hola").click(function() {
$('.animate__animated .animate__bounce-active').toggleClass('.animate__animated .animate__bounce-active');
});我看过很多帖子，也听过他们说的话，但这不管用。我是新来的，请帮帮忙。谢谢
回答 2
Stack Overflow用户
发布于 2022-02-05 03:49:56
# 1:失踪的jQuery。
如果在CodePen中打开控制台，您可能会看到这样的错误：
ReferenceError：$未定义
这意味着您使用jQuery的脚本而不导入它们。您可以导入它，无论是在CodePen的设置中还是从jQuery的CDN手动导入。
# 2:修正一些代码。
而不是这样，即查找具有类.animate__animated .animate__bounce-active切换的元素，将类添加到它们。
$('#hola').click(function () {
$('.animate__animated .animate__bounce-active').toggleClass(
'.animate__animated .animate__bounce-active'
);
});更改为此，即每次单击该类并在一秒钟后移除这些类时将该类添加到#hola中：
$('#hola').click(function () {
$(this).addClass('animate__animated animate__bounce');
setTimeout(() => {
$(this).removeClass('animate__animated animate__bounce');
}, 1000);
});# 3:意见
这就是你想要得到的元素。经过几次尝试并找到最佳解决方案之后，我认为animate.style不支持锚标记的动画。但是它适用于<h1>和其他人。(如果我错了或遗漏了什么，就纠正我)
<a id="hola" class="nav-link" href="#nuestros_servicios">NUESTROS SERVICIOS</a>结果(在代码片段中)
P/s:这个结果是使用<h1>而不是<a>标记。
$('#hola').click(function () {
$(this).addClass('animate__animated animate__bounce');
setTimeout(() => {
$(this).removeClass('animate__animated animate__bounce');
}, 1000);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>
<h1 id="hola" class="nav-link">NUESTROS SERVICIOS</h1>
Stack Overflow用户
发布于 2022-02-05 04:52:23
哇，谢谢，太高兴了，我不认为有人想帮我，因为这是我的第一篇帖子，我已经试过无数次了，其他所有的代码都不起作用的原因是因为你说的。我用的是锚牌。Animate.style有文档，他们说我想做的最好的方法就是使用这个
const animateCSS = (element, animation, prefix = 'animate__') =>
// We create a Promise and return it
new Promise((resolve, reject) => {
const animationName = `${prefix}${animation}`;
const node = document.querySelector(element);
node.classList.add(`${prefix}animated`, animationName);
// When the animation ends, we clean the classes and resolve the Promise
function handleAnimationEnd(event) {
event.stopPropagation();
node.classList.remove(`${prefix}animated`, animationName);
resolve('Animation ended');
}
node.addEventListener('animationend', handleAnimationEnd, {once: true});
});但他们从来没有说过，这是不起作用的锚标签，这就是为什么它不起作用。非常感谢。我试过你的溶液和他们的解决方案，它们都有效，但是是的，我不得不把它换成H1。我真希望我能把它和锚标签一起用，但我猜就是这样。谢谢
https://stackoverflow.com/questions/70994915
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号