Question

我对JavaScript很新，我需要一些帮助。我正在使用GreenSock库为svg对象制作动画，我遇到了一个问题。我设置了如果你点击一个按钮，动画就会播出，但是我想要设置它，如果我再次单击该按钮，它会反转动画。你们有什么想法怎么做吗？我尝试使用事件监听器，但这对我没有用。也许我做错了什么。请帮忙。谢谢！

Answer 1

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

例如，

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

Answer 2

这样的事可能吗？

var bool= true;

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

随意问我是否不够清楚

Answer 3

这是一个例子。您可以为要反复切换的CSS切换高度属性。这称为事件委托人。根据条件语句，只有一个事件监听器执行不同的功能。

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

获取按钮以触发两个事件

3 个答案: