使用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>