使用jQuery切換兩個CSS動畫只能通過一次

Question

我正在嘗試使用jQuery在兩個CSS動畫之間切換，但是它們只能工作一次！ 我如何獲得它以繼續切換？ 而且，由於某種原因，這似乎在jsFiddle中根本不起作用。 謝謝，麻煩您了。

 //hide and show counter-button $('#counter-button').click(function() { $('#counter').toggle(); //move button down/up on click if ($('#counter-button').attr('class') === 'movedown') { $('#counter-button').addClass('moveup'); } else { $('#counter-button').addClass('movedown'); } }); 

 #counter-button { font-size: 20px; position: fixed; right: 90px; bottom: 190px; z-index: 2; cursor: pointer; } .movedown { animation: down ease forwards 0.5s; } @keyframes down { from { right: 90px; bottom: 190px; } to { right: 90px; bottom: 100px; } } .moveup { animation: up ease forwards 0.5s; } @keyframes up { from { right: 90px; bottom: 100px; } to { right: 90px; bottom: 190px; } } #counter { position: fixed; height: 80px; width: 228px; bottom: 100px; right: 20px; border: 2px solid black; border-radius: 5px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="counter-button"> COUNTER </div> <div id="counter"></div> 

Answer 1

代替使用hasClass()的.attr('class') === 'movedown'檢查類。 並且在添加moveup類時，您應該刪除movedown類，反之亦然。

在此處檢查下面的代碼。

 //hide and show counter-button $('#counter-button').click(function() { $('#counter').toggle(); //move button down/up on click if ($('#counter-button').hasClass('movedown')) { $('#counter-button').addClass('moveup').removeClass('movedown'); } else { $('#counter-button').addClass('movedown').removeClass('moveup'); } }); 

 #counter-button { font-size: 20px; position: fixed; right: 90px; bottom: 190px; z-index: 2; cursor: pointer; } .movedown { animation: down ease forwards 0.5s; } @keyframes down { from { right: 90px; bottom: 190px; } to { right: 90px; bottom: 100px; } } .moveup { animation: up ease forwards 0.5s; } @keyframes up { from { right: 90px; bottom: 100px; } to { right: 90px; bottom: 190px; } } #counter { position: fixed; height: 80px; width: 228px; bottom: 100px; right: 20px; border: 2px solid black; border-radius: 5px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="counter-button"> COUNTER </div> <div id="counter"></div> 

Answer 2

您忘記刪除了不必要的類，從而刪除了意外的行為。 只需添加removeClass並刪除相應的類。 下面的代碼段

 //hide and show counter-button $('#counter-button').click(function() { $('#counter').toggle(); //move button down/up on click if ($('#counter-button').attr('class') === 'movedown') { $('#counter-button').addClass('moveup').removeClass('movedown'); } else { $('#counter-button').addClass('movedown').removeClass('moveup'); } }); 

 #counter-button { font-size: 20px; position: fixed; right: 90px; bottom: 190px; z-index: 2; cursor: pointer; } .movedown { animation: down ease forwards 0.5s; } @keyframes down { from { right: 90px; bottom: 190px; } to { right: 90px; bottom: 100px; } } .moveup { animation: up ease forwards 0.5s; } @keyframes up { from { right: 90px; bottom: 100px; } to { right: 90px; bottom: 190px; } } #counter { position: fixed; height: 80px; width: 228px; bottom: 100px; right: 20px; border: 2px solid black; border-radius: 5px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="counter-button"> COUNTER </div> <div id="counter"> </div> 

更新的代碼

此外，您可以通過首先將類moveup添加到button來優化上述代碼，然后僅使用toggleClass而不檢查任何條件。

 //hide and show counter-button $('#counter-button').click(function() { $('#counter').toggle(); //move button down/up on click $(this).toggleClass('movedown moveup'); }); 

 #counter-button { font-size: 20px; position: fixed; right: 90px; bottom: 190px; z-index: 2; cursor: pointer; } .movedown { animation: down ease forwards 0.5s; } @keyframes down { from { right: 90px; bottom: 190px; } to { right: 90px; bottom: 100px; } } .moveup { animation: up ease forwards 0.5s; } @keyframes up { from { right: 90px; bottom: 100px; } to { right: 90px; bottom: 190px; } } #counter { position: fixed; height: 80px; width: 228px; bottom: 100px; right: 20px; border: 2px solid black; border-radius: 5px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="counter-button" class="moveup"> COUNTER </div> <div id="counter"> </div> 

Answer 3

使用toggleClass

  //hide and show counter-button $('#counter-button').click(function() { $('#counter').toggle(); $('#counter-button').toggleClass('moveup movedown'); }); 

 #counter-button { font-size: 20px; position: fixed; right: 90px; bottom: 190px; z-index: 2; cursor: pointer; } .movedown { animation: down ease forwards 0.5s; } @keyframes down { from { right: 90px; bottom: 190px; } to { right: 90px; bottom: 100px; } } .moveup { animation: up ease forwards 0.5s; } @keyframes up { from { right: 90px; bottom: 100px; } to { right: 90px; bottom: 190px; } } #counter { position: fixed; height: 80px; width: 228px; bottom: 100px; right: 20px; border: 2px solid black; border-radius: 5px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="counter-button" class="moveup"> COUNTER </div> <div id="counter"> </div>