帶.delay的進度條

Question

Fiddle 我想讓進度條每秒填充25％。我目前的代碼使其達到100％，並保持點擊。我不確定是否最好使用jquery或css。或者如果有更簡單的方法來做到這一點。 另外，如何使一個動作多次發生.click。就像你點擊戰鬥並擊中怪物，然後等待進度條填充，然後再次擊中怪物等等？

$('#battle').click(function() { 
    $('#dam').html("You have hit the " + $('#monsters').val() + " for 5 damage"); 
    $('#bar').val(25).delay(1000); 
    $('#bar').val(50).delay(1000); 
    $('#bar').val(75).delay(1000); 
    $('#bar').val(100); 
}); 

Answer 1

在這裏，你去！ https://jsfiddle.net/6nrjw0Le/

對於你的榜樣，我使用

setTimeout() 

你的榜樣編輯。

var progress = function(sec){ 
    var interval = 250;//milliseconds 
    setTimeout(function(){ 
    sec = sec+25; 
     $('#bar').val(sec); 
     if(sec < 100) 
      progress(sec);//call self with new value 
    },interval) 
} 

$('#battle').click(function() { 
    $('#dam').html("You have hit the " + $('#monsters').val() + " for 5 damage"); 
    /*$('#bar').val(25).delay(1000); 
    $('#bar').val(50).delay(1000); 
    $('#bar').val(75).delay(1000); 
    $('#bar').val(100);*/ 
    progress(0);//initialize progress bar 
}); 

delay（）是異步的。延遲一個接一個並不意味着你在第一個完成之後得到執行。