獲取一個按鈕來觸發兩個事件

我對JavaScript很新，我需要一些幫助。我正在使用GreenSock庫來動畫svg對象，並且遇到問題。我已經設置了，如果你點擊一個按鈕，動畫會播放出來，但我想以一種方式設置它，如果我再次單擊該按鈕，它會反轉動畫。你們有什麼想法如何做到這一點？我嘗試過使用事件監聽器，但那對我不起作用。也許我做錯了什麼。請幫忙。謝謝！！獲取一個按鈕來觸發兩個事件

來源

2016-02-13 user3504306

您可以包括你已經嘗試過的代碼？ – jmunsch

是的，請分享您的代碼。 –

你也可以包含一個[CodePen]（http://codepen.io/） –

這樣的事情可能嗎？

var bool= true; 

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

隨意問我是不是不夠明確

來源

2016-02-13 00:37:32 Hugz

那個jQuery'.toggle（）'方法有點太具體了不是嗎？它只能用於隱藏或顯示指定的元素，而不是任何任意的動畫。（除非你正在考慮在v1.9中從jQuery中刪除的舊的'.toggle（）'事件處理方法]（http://api.jquery.com/toggle-event/）。） – nnnnnn

有一個布爾開關，每個按鈕被點擊一次翻轉，並根據布爾值觸發不同的動畫。

例如，

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

來源

2016-02-13 00:37:43 Roaringsheep

-1

下面是一個例子。你可以切換出你希望來回切換的任何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); 
    } 
});

來源

2016-02-13 00:59:47

獲取一個按鈕來觸發兩個事件

回答

相關問題