javascript - Toggling two CSS animations with jQuery only works once through -

i trying toggle between 2 css animations using jquery, work once! how can keep toggling? also, doesn't seem work in jsfiddle @ reason. please , thank you.

//hide , 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 {    {      right: 90px;      bottom: 190px;    }    {      right: 90px;      bottom: 100px;    }  }  .moveup {    animation: ease forwards 0.5s;  }  @keyframes {    {      right: 90px;      bottom: 100px;    }    {      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>

instead of .attr('class') === 'movedown' check class using hasclass(). , while adding moveup class should remove movedown class , vice-versa.

check code below here.

//hide , 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 {    {      right: 90px;      bottom: 190px;    }    {      right: 90px;      bottom: 100px;    }  }  .moveup {    animation: ease forwards 0.5s;  }  @keyframes {    {      right: 90px;      bottom: 100px;    }    {      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>