CODEWITHSUNDEEP
jquerytwitter-bootstrapjquery-animate
michel lompret
michel lompret

Reputation: 317

jQuery animate() width duration

I'm trying to animate the width of a progress bar but no matter what duration I use the animation takes the same time. In Chrome it just delays. In Firefox the animation is slow in the beginning and faster in the en. I don't know why this is happening.

var $progressBar = $(".progress-bar")
$progressBar.animate({
  width: $progressBar.text()
}, 5000);
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-12 col-sm-12">
  <div class="progress">
    <div class="progress-bar progress-bar-striped progress-bar-animated" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width:0%">60%</div>
  </div>
</div>

Upvotes: 1

Views: 872

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337580

The issue is because by default Bootstrap applies a transition: width rule on the CSS for the .progress-bar element. This is interfering with the jQuery logic that animates the width of the bar, so you need to override that CSS rule to remove it, like this:

var $progressBar = $(".progress-bar");
$progressBar.animate({
  width: $progressBar.text()
}, 5000);
div .progress-bar {
  transition: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-12 col-sm-12">
  <div class="progress">
    <div class="progress-bar progress-bar-striped progress-bar-animated" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width:0%">60%</div>
  </div>
</div>

Upvotes: 2

Related Questions