How to change CSS class with jQuery?

Question

I'm trying to change class after progressbar is full, but the class doesn't change and I get no error. It remains the class show. Here is my code - what is wrong with it?:

function animate_progressbar() {
  $total_width = $("#progressbar_wrapper").width();
  $width_inc = $total_width / 1;

  if ($("#progressbar").width() < $total_width) {
    $width = $("#progressbar").width() + $width_inc;
    $("#progressbar").animate({
      width: '' + $width + ''
    }, 7000);
  }

  if ($("#progressbar").width() == $total_width) {
    $('#progressbar').removeClass("show");
    $('#progressbar').addClass('hider');
  }

}

function reset_progressbar() {
  $("#progressbar").animate({
    width: '0px'
  }, 300);
  $('#progressbar').addClass('show');
  $('#progressbar').removeClass('hider');
}

body {
  margin: 0 auto;
  padding: 0px;
  text-align: center;
  width: 100%;
  font-family: "Myriad Pro", "Helvetica Neue", Helvetica, Arial, Sans-Serif;
  background-color: #A9F5A9;
}

#wrapper {
  margin: 0 auto;
  padding: 0px;
  text-align: center;
  width: 995px;
}

#progressbar_wrapper {
  border: 1px solid #088A08;
  margin-left: 345px;
  margin-top: 20px;
  width: 300px;
  height: 35px;
  border-radius: 3px;
  overflow: hidden;
}

#progressbar {
  width: 0px;
  height: 35px;
  border-radius: 0px;
  background-color: green;
}

#progressbar_div input[type="button"] {
  background-color: #088A08;
  border: none;
  width: 150px;
  height: 40px;
  color: white;
  border-radius: 3px;
  border-bottom: 3px solid #0B610B;
}

.hider {
  opacity: 0;
}

.show {
  opacity: 100;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="wrapper">
  <div id="progressbar_div">
    <div id="progressbar_wrapper">
      <div id="progressbar" class="show"></div>
    </div>
    <p>
      <input type="button" value="ANIMATE" onclick="animate_progressbar();">
      <input type="button" value="RESET" onclick="reset_progressbar();">
    </p>
  </div>
</div>

I was trying with

if($("#progressbar").width() < $total_width)
             {
            $width=$("#progressbar").width() + $width_inc;
            $("#progressbar").animate({width:''+$width+''},7000);
            }
            
            else
             {
            $('#progressbar').removeClass("show");
            $('#progressbar').addClass('hider');
            }

But no effect - still class show all the time.

Answer 1

function animate_progressbar() {
  $total_width = $("#progressbar_wrapper").width();
  $width_inc = $total_width / 1;

  if ($("#progressbar").width() < $total_width) {
    $width = $("#progressbar").width() + $width_inc;
    $("#progressbar").animate({
      width: '' + $width + ''
    }, 7000, function() {
        $('#progressbar').removeClass("show");
        $('#progressbar').addClass('hider');
    });
  }

 

}

function reset_progressbar() {
  $("#progressbar").animate({
    width: '0px'
  }, 300);
  $('#progressbar').addClass('show');
  $('#progressbar').removeClass('hider');
}

body {
  margin: 0 auto;
  padding: 0px;
  text-align: center;
  width: 100%;
  font-family: "Myriad Pro", "Helvetica Neue", Helvetica, Arial, Sans-Serif;
  background-color: #A9F5A9;
}

#wrapper {
  margin: 0 auto;
  padding: 0px;
  text-align: center;
  width: 995px;
}

#progressbar_wrapper {
  border: 1px solid #088A08;
  margin-left: 345px;
  margin-top: 20px;
  width: 300px;
  height: 35px;
  border-radius: 3px;
  overflow: hidden;
}

#progressbar {
  width: 0px;
  height: 35px;
  border-radius: 0px;
  background-color: green;
}

#progressbar_div input[type="button"] {
  background-color: #088A08;
  border: none;
  width: 150px;
  height: 40px;
  color: white;
  border-radius: 3px;
  border-bottom: 3px solid #0B610B;
}

.hider {
  opacity: 0;
}

.show {
  opacity: 100;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="wrapper">
  <div id="progressbar_div">
    <div id="progressbar_wrapper">
      <div id="progressbar" class="show"></div>
    </div>
    <p>
      <input type="button" value="ANIMATE" onclick="animate_progressbar();">
      <input type="button" value="RESET" onclick="reset_progressbar();">
    </p>
  </div>
</div>