Question

我有以下功能，

<script>
function fadetoComplete() {
    $("#progressbar-1").css({
        'background-color': 'green'
    }).text("complete");
}
</script>

以下功能控制进度条的增加方式。

<script>
 var progress = 0;
 var total_questions = 5;
    //need this to check if the question has not been answered before
    var questions = {
        "q1": 0,
        "q2":0,
        "q3":0,
        "q4":0,
        "q5":0
    }
    $( function() {
        $("#progressbar-1").text(progress)
        $("input, select").change( function() {
            el_name = $(this).attr("name");


            switch (this.nodeName.toLowerCase()) {
                case "select":
                    field =$("[name='"+el_name+"']");
                    val = (field.val() === ""  || !field.val()) ? null: field.val();
                    break;
                case "input":
                    field =$("[name='"+el_name+"']:checked");
                    val = field.length;
                    break;
            }

            if (val) {

                if (!questions[el_name]) {
                    progress = progress +1;
                    questions[el_name]=1
                }

            } else {


                questions[el_name]=0
                progress = (progress > 0)?progress-1:0;


            }
         var result =  progress / total_questions;
            result = result * 100;

            $("#progressbar-1").css({'width':result+'%','background-color':'red'});
            $("#progressbar-1").text(progress);

        if(result == 100){

                 fadetoComplete();
            }
        })
    })
    </script>

我的调查问卷中的一些HTML。

    <div class="container-main bg-5">
<form id="quiz">
    <div class="questions">
      <!--Question 5 -->
      <h2>Hardware or Software?</h2>
      <input type="radio" name="radio2"  value="c1">
          Hardware<br />
      <input type="radio" name="radio2"  value="c2">
         Software<br />
      </div>

    <button type='button' id="submit" onclick="answers()">Submit Your Answers</button>

      <button type="reset" id="reset" onclick="resetAnswer()">Reset</button>

  </form>

  <div id ="progressbar-1"></div>


</div>

当条形值达到100％时，这会将我的进度条更改为绿色。显然虽然它只是跳到了下一个颜色。我尝试过使用CSS过渡但不起作用。理想情况下，我希望在进度条达到100％时调用该函数，并使函数慢慢更改进度条颜色。

Answer 1

这就是我的想法：

var w = 0;
$('button').on('click',function(){
  
  w +=25;
  $("#progressbar-1").css('width', w+'%');
  
  
  if(w >= 100){
    w = 100;
    $("#progressbar-1").css({'width':'100%','background':'green'});
    
  }
  
});

#progressbar-1{ 
display:block;
width:0%;
height:5px;
background-color:red;
transition: 2s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="progressbar-1"></div>
<br>
<button>Add +</button>

如何使我的进度条平滑地改变颜色

1 个答案: