Question

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

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);
};

Answer 1

如果使用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") // Select buttons directly by ID

$(".buttons") // Select buttons by class.

Answer 2

如果您使用的是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);
};

您可以使用：

将tweenClickHandler附加到buttons中的每个元素

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

请注意，forEach不会在IE＆lt;＆lt; 9本机，但可以使用Mozilla开发人员网络文档here提供的polyfill添加。

如何调用多个按钮在tweenmax中执行相同的功能？

2 个答案: