Увеличить ширину на 10%?

Question

Я хочу, чтобы увеличить ширину ProgressBar на 10% каждый раз, когда я нажимаю на кнопку:

<div id="#progressBar" style="width:50%"> </div> 

Я хочу, чтобы увеличить ширину строки прогресса выше на 10%, при нажатии на кнопку.

Я попытался это, но он не работает:

$("#increaseButton").click(function() { 
    $("#progressBar").css("width",$("#div2increase").width + 10); 
}); 

Пожалуйста, помогите!

Текущая ширина индикатора выполнения может быть любым значением от 0% до 100%. И это неизвестно во время его увеличения на 10%

Answer 1

Следующий код увеличивает 10% при нажатии на кнопку. Когда бар достигает 100%, вы больше не можете увеличивать размер.

Это очень простой, но я надеюсь, что это поможет вам начать.

http://jsfiddle.net/x8w2fbcg/6/

<div id="progressBar">bar</div> 
    <div id="progressBarFull"> &nbsp;</div> 
    <button id="btn" type="button">enlarge</button> 



    $("#btn").click(function() { 
     var curSize = $("#progressBar").width(); 
     var fullSize = $("#progressBarFull").width(); 
     if(curSize < 100) { 
      var increment = fullSize/ 10; 
     $("#progressBar").css('width', '+=' + increment); 
     } 
    }); 


    #progressBar { 
     position: fixed; 
     height: 20px; 
     width: 0px; 
     background-color: red; 
    z-index: 10;  
    } 
    #progressBarFull { 
     position: fixed; 
     height: 20px; 
     width: 100px; 
     background-color: gray;  
    } 
    #btn { 
      position: fixed; 
     top: 100px; 

    } 

Answer 2

Для вы используете %, элемент будет наследовать % от его родителей ширина, так что вам нужно, чтобы получить фактическую % width в ProgressBar перед добавлением 10%

$("#increaseButton").click(function() { 
 
    var $bar = $("#progressBar"); 
 
    var $barParent = $bar.parent(); 
 
    var perc = ~~($bar.width() * 100/$barParent.width()); 
 
    if(perc<100) $bar.css({ width : (perc+10) +"%" }); 
 
});

*{margin:0;} 
 
#progressBar{height:30px; background:red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="progressBar" style="width:50%"></div> 
 
<button id="increaseButton">INCREASE</button>