Toggling two CSS animations with jQuery only works once through

Question

I am trying to toggle between two CSS animations using jQuery, but they only work once! How can I get it to keep toggling? Also, this doesn't seem to work in jsFiddle at all for some reason. Please and thank you.

 //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

Instead of .attr('class') === 'movedown' check class using hasClass() . And while adding moveup class you should remove the movedown class and vice-versa.

Check the code below here.

 //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

You forgot to remove the unnecessary class and hence unexpected behavior. Just add removeClass and remove respective classes. Snippet below

 //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> 

Updated Code

Further you can optimize the above code by initially adding class moveup to your button and then you can just use toggleClass without checking for any condition.

 //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

Use 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>