获取一个按钮来触发两个事件答案

【问题标题】：Getting a button to trigger two events获取一个按钮来触发两个事件
【发布时间】：2016-02-13 00:28:08
【问题描述】：

我对 JavaScript 还很陌生，需要一些帮助。我正在使用 GreenSock 库为 svg 对象设置动画，但遇到了问题。我已经设置了，如果你点击一个按钮，动画就会播放，但我想设置它，如果我再次点击按钮，它会反转动画。你们对如何做到这一点有任何想法吗？我尝试使用事件侦听器，但这对我不起作用。也许我做错了什么。请帮忙。谢谢！！

【问题讨论】：

你能把你试过的代码包括进来吗？
是的，请分享您的代码。
您还可以添加CodePen

标签： javascript animation svg jquery-animate gsap

【解决方案1】：

有一个布尔开关，每次点击按钮时都会翻转，并根据布尔值触发不同的动画。

例如，

var bool = false;
function onClickAnimation() {
  if(!bool) {
    bool = true;
    //play the animation
  } else {
    bool = false;
    //reverse the animation
  }
}

【讨论】：

【解决方案2】：

可能是这样的吗？

var bool= true;

    function toggle(){
        if (bool){
            // script for animation 1
            bool = false;
        } else {
            // script for animation 2 
            bool = true
        }
    }

如果我不够清楚，请随时问

【讨论】：

那个jQuery .toggle() 方法有点太具体了吧？它仅适用于隐藏或显示指定元素，不适用于任何任意动画。（除非您想到的是 old .toggle() event handling method，它在 v1.9 中已从 jQuery 中删除。）

【解决方案3】：

这是一个例子。您可以为要来回切换的任何 CSS 切换 height 属性。这称为事件委托者。只有一个事件监听器根据条件语句执行不同的功能。

https://jsfiddle.net/mqmf12hy/

var resizeButton = document.getElementById('resizeButton');
resizeButton.addEventListener('click', function() {
    var happyFace = document.getElementById('happyFace');
  // If the image is small, make it big
    if (happyFace.style.height == '56px') {
    $(happyFace).animate({
        height: '72px'
    }, 1000);
  }
  // If the image is big, make it small
  else if (happyFace.style.height == '72px') {
    $(happyFace).animate({
        height: '56px'
    }, 1000);
  }
});

【讨论】：