CODEWITHSUNDEEP
jquerycsstwitter-bootstrap
James
James

Reputation: 1003

Changing Bootstrap animation progress bar animation duration with jQuery

I'm trying to change the duration of the CSS3 animation used on the Twitter Bootstrap animated progress bar. My desired result is to decrease the duration of the animation using jQuery so that I have a faster animation.

I've got the following HTML and CSS and used the following jQuery.

HTML:

<div class="progress progress-striped active" style="width:102px;">
    <div id="test" class="progress-bar" role="progressbar">
    </div>
</div>

CSS:

.progress-bar {
    background-color: #bd4a61;
    width: 100%;
}

I'm using the following jQuery to change the values but this doesn't seem to have any effect. I'm using Chrome as my test browser but I seem to get the behavior in all browsers.

jQuery:

$("#test").css("-webkit-animation-duration", "1s");

If I fetch the value of animation-duration after executing the jQuery it reads as being "1s" as opposed to the default "2s" but the visual effect remains unchanged.

EDIT: Using jQuery to hide and show the element after setting the value seems to get the effect working for Internet Explorer.

Upvotes: 3

Views: 11495

Answers (2)

user10960748
user10960748

Reputation: 1

  $(document).ready(function() {
      $('.progress-bar').css("width",
                function() {
                    return $(this).attr("aria-valuenow") + "%";
                }
        ) 
    });
    var counterBack = setInterval(function(){   
      
      var date = $("#time i").html(); 
      var d = date/30*100;
      var i = Math.round(d); 
       if (i < 20){
           $("#progress").addClass('progress-bar-danger').removeClass('progress-bar-info');
        }
        if (i < 70){
           $("#progress").addClass('progress-bar-info').removeClass('progress-bar-success');
        }
        if (i > 0){
          $('.progress-bar').css('width', i+'%');
        } else {
          $('.progress-bar').css('width', 0+'%');
          clearInterval(counterBack);
        }  
      }, 1000);
.progress {
  margin-top: 10px;
  margin-bottom: 10px;
  height: 25px;

}
.progress .skill {
  font: normal 12px "Open Sans Web";
  line-height: 35px;
  padding: 0;
  margin: 0 0 0 20px;
  text-transform: uppercase;
}
.progress .skill .val {
  float: right;
  font-style: normal;
  margin: 0 20px 0 0;
}

.progress-bar {
  text-align: left;
  transition-duration: 3s;
}
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
   <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
  
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
  <div class="progress">
  <div id="progress" class="progress-bar progress-bar-striped progress-bar-animated active progress-bar-success" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">
    <span class="sr-only"></span>
    <span id="time" class="skill">Your Time<i class="val">{{counter | async}}</i></span>
  </div>
</div>

Upvotes: 0

Emil L
Emil L

Reputation: 21081

It seems like at least Chrome does not detect the change in the css property animation-duration. However, by removing and then re-adding the progress-bar class the animation when changing the animation-duration works when the re-adding of the progress-bar class is done in a setTimeout.

$('#test').css('animation-duration', '0.1s').removeClass('progress-bar');
setTimeout(function() { 
    $('#test').addClass('progress-bar');
}, 1);

This looks seriously ugly and error prone, but it works.

Another and in my opinion better way would be to set all animation properties. This works without having to fiddle around with adding and removing of the progress-bar class:

var secondFraction = '0.2'
$('#test').css('animation', secondFraction + 's linear 0s normal none infinite progress-bar-stripes');

Upvotes: 4

Related Questions