Question

我试图在动画按钮上使用这个jQuery函数并不是真的有效，我可以得到帮助吗？以下是代码

HTML

<button class="btn-rounded">Button</butto>

CSS

.btn-rounded{
    color: black;
    opacidity:.7;
    border-radius:150px;
    background-color:#FFF067;
}

JS

$("#img").addClass("animated bounce");

Answer 1

你的js根本不是针对按钮，而是一个元素$('button.btn-rounded').on('click', function(){ $(this).addClass('animated bounce'); });。此外，它只是在页面加载时立即将类添加到元素，无论操作如何。

要在点击时触发按钮动画，您需要创建一个事件处理程序，以便在单击时将类应用于按钮。

digraph G {
    "a";
    "b";
    "c";
    "d";
    "e";
    "a" -> "b";
    "a" -> "d";
    "a" -> "a";
    "b" -> "c";
    "c" -> "d";
    "d" -> "e";
    "e" -> "a";
}

Answer 2

你可以跳过jQuery并使用普通的'vanilla CSS。

.btn-rounded {
  color: black;
  opacity:.7;
  border-radius:150px;
  background-color:#FFF067;
  transform: translateY(0);
  transition: transform .5s cubic-bezier(0.5, -2.5, 0.5, 3.5);
}

.btn-rounded:hover {
  transform: translateY(-25%);
}

现在，如果你将鼠标悬停在它上面，这个坏孩子会为你跳起来。不要忘记修复CSS中的不透明错误以及HTML中的按钮拼写错误。

动画按钮jQuery

2 个答案: