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.

You are opening your <script> tag but not closing it. Therefore, the browser interprets everything after it as Javascript, even the HTML. Doesn't your console say Uncaught SyntaxError: Unexpected token '<' ? — Jeremy Thille
– Jeremy Thille, Commented Dec 4, 2021 at 14:36
It would have been nice if you had gone the extra step to make this a complete demo so we can see what is going on and debug it in dev tools. See I've been told to create a "runnable" example with "Stack Snippets", how do I do that? — charlietfl
– charlietfl, Commented Dec 4, 2021 at 14:40

Aloksinghse · Accepted Answer · 2021-12-04 15:13:17Z

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>

Using the animate callback is likely what OP wants but you should provide an explanation about your solution. Code only answers are not very helpful

Collectives™ on Stack Overflow

How to change CSS class with jQuery?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related