Jquery 사용자 지정 진행 막대 애니메이션이 적용되지 않습니다.

Question

이 코드를 올바르게 애니메이트하는 방법에 대한 질문이 있습니다. 내가 만든 작은 알고리즘을 기반으로 움직이는 진행 막대를 만들려고하는데 애니메이션이 아닙니다. 여기 내 코드는 다음과 같습니다 또한

function WidthGenerator() { 
"use strict"; 
var question = prompt("Enter number of hours worked:", "Enter here"); 
if (isNaN(Number(question)) === false) { 
    var generateMultiplier = Math.ceil(Math.random() * 4); 
    alert(generateMultiplier); 
    var newWidth = question * generateMultiplier; 
    alert(newWidth); 
    return newWidth; 
} else { 
    question = prompt("That is not a number; Enter the number of hours worked.", "Enter here"); 
} 
} 

$(document).ready(function() { 
"use strict"; 
$('#Progress-Button').click(function() { 
    var animateWidth = WidthGenerator(); 
    var widthCheck = $('#Progress-Bar').css('width'); 
    if (widthCheck < animateWidth) { 
     $('#Progress-Bar').animate({ 
      width: '+=1%' 
     }, 1000); 
    } else { 
     $('#Progress-Bar').stop(); 
    } 
}); 
}); 

, 나는 그것이 버튼이 트리거 될 때마다 증가하는 방법을 알아 내려고 노력하고있어. 예 : 사용자가 채워진 진행률 막대의 20 %를 생성 한 다음 생성기를 다시 실행하고 추가 30 %를 생성합니다. 진행률 표시 줄에 50 %가 표시되도록하려면 어떻게해야합니까?

감사합니다.

Answer 1

@Jabaluza가 지적한 바에 따라.

변경 : $('#Progress-Bar').css('width'); 에 : $('#Progress-Bar').outerWidth();

이 당신에게 당신의 의도 된 결과를 제공하지만 첫 번째가에서 '픽셀'의 문자열을 반환하는 경우 확실하지가, 후자는 당신이 찾고있는 수를 반환합니다.