单击时如何使动画发生？答案

【问题标题】：How to make animation happen when you click?单击时如何使动画发生？
【发布时间】：2020-07-23 13:20:04
【问题描述】：

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

$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

【问题讨论】：

这个问题已经通过on the GreenSock forums得到了回答。
@ZachSaucier，我提出了这个问题，我真的很困惑

标签： javascript html jquery css gsap

【解决方案1】：

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

例子：

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

function functionOnClick() {
// Execute functionality here
}

编辑：

更好的答案

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

【讨论】：