点击时如何使 animation 发生？

Question

我是 jQuery 和 JavaScript 的新手，不要严格判断。 我写了一个小脚本来动画标签的显示。 我决定在悬停并单击按钮本身时添加 animation 。 但我不知道该怎么做。 通过 mouseenter 和 mouseleave 悬停时制作了 animation。 我希望这些行在您单击它们时移动到单词的中心，并且当您在活动模式下单击另一个按钮时，它们会离开旧的并出现在新的上。

$buttons.click(function() {
  var selected = $(this).index();
  TweenMax.to($buttons, 1, {x: -500, opacity: 0.25});
  TweenMax.to(this, 0.5, {opacity: 1, color: '#85729E'});

  TweenMax.to($tabs, 0.5, {x: 0, opacity: 0, display:'none', delay: 0.5 });
  TweenMax.to($tabs.eq(selected), 1, { opacity: 1, display:'block', delay: 0.5 });
});

我将完整代码上传到CodePen

Answer 1

在您的 html 代码中，使用onclick属性和 function 作为值。

例子：

<button type='button' onclick='functionOnClick()'>Click me</button>

function functionOnClick() {
// Execute functionality here
}

编辑：

更好的答案

buttonId.addEventListener('click', functionOnClick());