jquery addclass 不适用于 animate.css

标签 jquery html css animate.css

<分区>

$(document).ready(function() {
  $(".test").click(function() {
    $(".test").addClass("animated shake");
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" />
<span class="test">element</span>

我哪里出错了?从现在开始感谢您的帮助...

最佳答案

因为 span 是内联元素,所以 transform 和其他属性将不起作用...

...所以尝试将 display:inline-block 添加到 span

Read this for more info on inline elements

...同样在您的 jQuery 代码中使用 $(this).addClass("animated shake") 而不是 $(".test").addClass("animated shake")

$(this).addClass("animated shake")... 它将向点击的 .test 元素添加类。

$(".test").addClass("animated shake")... 它将向所有 .test 元素添加类。

堆栈片段

$(document).ready(function() {
  $(".test").click(function() {
    $(this).addClass("animated shake");
  });
});
.test {
  display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" />
<span class="test">element</span>

关于jquery addclass 不适用于 animate.css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48961245/

上一篇:html - 将搜索图标放在搜索输入中,然后在页面中居中

下一篇:html - 为什么位置: relative make the height to zero?

相关文章:

javascript - 通过两个文本查找元素

javascript - 如何使用用户输入创建倒计时器

javascript - 在一个项目/ fiddle 中组合 'add table' 和 'save copy row'

javascript - 如何设置 html 上传按钮的样式并且侧面仍然有文字?

php - .htaccess 密码保护登录后不显示 css 或图像

asp.net - JQuery .Show() 不适用于服务器控制?

javascript - 选中/取消选中勾选复选框,但忽略任何禁用的复选框

jquery - 使用飞行效果将一个 Div 飞到另一个 div

html - 为什么我的日历图标没有出现在表格单元格中?

html - 如何使 <span> 与 &lt;input type ="text"> 的高度相同