JavaScript(jQuery)でBootStrapのプログレスバーを動かしたい

Question

Bootstrapのプログレスバーを、jQueryのcssメソッドを使用して1秒ごとに50%増加させて2秒で100%にするということをしたいのですが上手く行きません。
0%のプログレスバーだけ表示されて何も進まない状況です。

Bootstrapのプログレスバー

<div class="progress">
	<div class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" style="width: 0%;"></div>
</div>

JavaScript

var ProgressBarPercentage = 0;
var changeProgressBarPercentage = function(){
    ProgressBarPercentage + 50;
    $(".progress-bar").css("width", String(ProgressBarPercentage) + "%");
}

var ProgressBarTimer = setInterval(function(){
    changeProgressBarPercentage();
        if(ProgressBarPercentage > 100){　
      	    clearInterval(ProgressBarTimer);
      	    //2秒後にする処理
}}, 1000);

特にエラーなどは吐いていません。
どなたか解決法分かった方いましたら教えて頂けると幸いです。

Answer 1

まず数値の増加部分も文法にミスがあります。

あと、関数の呼び出しをしないと、効果がありません

var ProgressBarPercentage = 0;
var changeProgressBarPercentage = function(){
    ProgressBarPercentage = ProgressBarPercentage + 50;
    $(".progress-bar").css("width", String(ProgressBarPercentage) + "%");
}
changeProgressBarPercentage()

1秒後にメモリを増やすのは下記のようなコードになりますが、1秒ずつ2秒間増やすにはさらに工夫が必要です。

// 
setTimeout(function() {
  changeProgressBarPercentage()
}, 1000)

まずはここまでをお試しください

Comments

[FUGAMARU-MCPE]

数値の増加はそのようにするのですね。
タイマーの部分ですが、ProgressBarTimerというタイマーで関数は呼び出しています。
では「ProgressBarTimer();」と呼び出せば動くかと思ったのですが、それは関数ではないと吐かれます。どうしたら良いのでしょうか。

[sakapun]

ProgressBarTimerは下記どちらかのような形で記述しない限り関数にはなっていません。

ProgressBarTimer = function() {

}

function ProgressBarTimer() {
}

どのようにコードを書いたかも再度質問する際にはつけるようにしてくださいね