如何在补间中调用多个按钮来执行相同的功能

How to call multiple buttons to do the same function in tweenmax?

本文关键字：执行 按钮 功能 调用      更新时间：2023-09-26

我目前正在使用 tweenMax 做一个网站，我想问一下是否有人知道 tweenmax 可以做类似数组的事情，这意味着用 1 行简单的代码调用几个按钮来做同样的功能。以下是我当前的代码，如果添加了新按钮，我需要复制并粘贴。

btn.onclick = function() {
    TweenMax.staggerTo([box4, box3, box2, box, box8, box7, box6, box5, box9, ], 1,  {right:"-25000", ease:Quad.easeIn}, 0.05);
};
btn2.onclick = function() {
    TweenMax.staggerTo([box4, box3, box2, box, box8, box7, box6, box5, box9, ], 1,  {right:"-25000", ease:Quad.easeIn}, 0.05);
};
btn3.onclick = function() {
    TweenMax.staggerTo([box4, box3, box2, box, box8, box7, box6, box5, box9, ], 1,  {right:"-25000", ease:Quad.easeIn}, 0.05);
};

如果你使用的是jQuery，Fusion的答案是正确的和有用的。如果你想避免依赖jQuery，那么假设你有一个按钮数组，如var buttons = [btn, btn2, btn3]和一个函数：

function tweenClickHandler() {
  TweenMax.staggerTo([box4, box3, box2, box, box8, box7, box6, box5, box9, ], 1,  {right:"-25000", ease:Quad.easeIn}, 0.05);
};

您可以使用以下命令将补间点击处理程序附加到buttons中的每个元素：

buttons.forEach(function(button) {button.onclick = tweenClickHandler;});

请注意，forEach 本身不适用于 IE <9，但可以使用此处的 Mozilla Developers Network 文档提供的 polyfill 进行添加。

如果使用 jQuery 对你来说没问题，只需使用 jQuery 选择器：

$（btn，btn2，btn3）.click（function（） {        TweenMax.staggerTo（[box4， box3， box2， box， box8， box7， box6， box5， box9， ]， 1， {right："-25000"， ease：Quad.easeIn}， 0.05）;    });

jQuery选择器提示：

$（"#firstbutton ， #secondbutton ， #thirdbutton"）//直接按 ID 选择按钮$（".buttons"）//按类选择按钮。
相关文章：