如果大于，则动态检查值和addClass

Question

我正在制作进度条，如果进度条值大于，我想addClass。现在它检查动画后的值，但我想检查动画处理的时间。

我的JSFiddle

我的Jquery

$("#loading-bar .bar").animate({width: bar_one}, 2000,function(){

    if($("#loading-bar .bar").width() >= $(".limits .limit-bar").width() * 0.5){
        $("#loading-bar .bar").addClass("warning");
    }
  if($("#loading-bar .bar").width() >= $(".limits .limit-bar").width() * 0.7){
        $("#loading-bar .bar").addClass("danger");
    }
});

也许有办法改变我的代码。我是JQuery的新手，从帮助中学到了很多东西

Answer 1

animate方法中提供的回调作为参数将被视为complete函数，该函数仅在动画结束时执行。

使用step or progress option in animate()方法在每一步执行一项功能。

$("#loading-bar .bar").animate({
  width: bar_one
}, {
  duration: 2000,
  progress: function() {
    // your code here
  }
});

＆＃13;

＆＃13;

var bar_one = "71%";
var bar_two = "30%";
var bar_three = "50%";

$("#loading-bar .bar").animate({
  width: bar_one
}, {
  duration: 2000,
  progress: function() {
    if ($("#loading-bar .bar").width() >= $(".limits .limit-bar").width() * 0.5) {
      $("#loading-bar .bar").addClass("warning");
    }
    if ($("#loading-bar .bar").width() >= $(".limits .limit-bar").width() * 0.7) {
      $("#loading-bar .bar").addClass("danger");
    }
  }
});

$("#second-bar .bar").animate({
  width: bar_two
}, {
  duration: 2000,
  progress: function() {

    if ($("#second-bar .bar").width() >= $(".limits .limit-bar").width() * 0.5) {
      $("#second-bar .bar").addClass("warning");
    }
    if ($("#second-bar .bar").width() >= $(".limits .limit-bar").width() * 0.7) {
      $("#second-bar .bar").addClass("danger");
    }
  }
});

$("#third-bar .bar").animate({
  width: bar_three
}, {
  duration: 2000,
  progress: function() {
    if ($("#third-bar .bar").width() >= $(".limits .limit-bar").width() * 0.5) {
      $("#third-bar .bar").addClass("warning");
    }
    if ($("#third-bar .bar").width() >= $(".limits .limit-bar").width() * 0.7) {
      $("#third-bar .bar").addClass("danger");
    }
  }
});

＆＃13;

.limits {
  margin-bottom: 10px;
}

.limits .limit-bar {
  background: #dedede;
  width: 100%;
  height: 5px;
}

.limits .limit-bar .bar {
  width: 0;
  background: green;
  position: relative;
  height: 5px;
}

.limits .limit-bar .bar.warning {
  background: yellow;
}

.limits .limit-bar .bar.danger {
  background: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loading-bar" class="limits">
  <div class="limit-bar">
    <div class="bar"></div>
  </div>
</div>

<div id="second-bar" class="limits">
  <div class="limit-bar">
    <div class="bar"></div>
  </div>
</div>

<div id="third-bar" class="limits">
  <div class="limit-bar">
    <div class="bar"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;