點擊時如何使 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());