web-dev-qa-db-ja.com

jQuery UIプログレスバーの値をどのようにアニメーション化しますか？

JQuery UIプログレスバーをセットアップしましたが、jQuery animateを使用してその値をアニメーション化することはできません。この作品を作る方法についてのアイデアはありますか？

percentDone変数には0〜100の数値が保持され、スクロールバーに沿ってどれだけの距離があるかが示されます（これで問題ありません）。

私はいくつかの異なることを試してみましたが役に立ちませんでした。ここに私が持っているものがあります：

var progressbar = $("#progressbar1").widget();

progressbar.animate({
    value: percentDone
}, 5000, function() {
    console.debug('done animating');
});

「value」メソッドを使用してスクロールバーを更新すると正常に機能しますが、スムーズにアニメーション化するのではなく、その値にジャンプすることに注意してください。

$("#progressbar1").progressbar('value', percentDone);
jqueryjquery-uiscrollbarjquery-animate
35
Julian
$(function() {
    var pGress = setInterval(function() {
        var pVal = $('#progressbar').progressbar('option', 'value');
        var pCnt = !isNaN(pVal) ? (pVal + 1) : 1;
        if (pCnt > 100) {
            clearInterval(pGress);
        } else {
            $('#progressbar').progressbar({value: pCnt});
        }
    },10);
});
  • DEMO 2： ：以下の@Peterの応答の適応;-)。
$(function() {
    $('#progressbar').progressbar(); // inizializa progressbar widget
    $pVal = $('.ui-progressbar-value').addClass('ui-corner-right');
    var pGress = setInterval(function() { //generate our endless loop
        var pCnt = $pVal.width(); // get width as int
        // generate a random number between our max 100 and it's half 50, 
        // this is optional, and make the bar move back and forth before
        // we reach the end.
        var rDom = Math.floor(Math.random() * (100 - 50 + 1) + 50);
        var step = rDom >= 100 ? 100: rDom; // reached our max ? reset step.
        doAnim(step);
    },1000);
    var doAnim = function(wD) {
        // complete easing list http://jqueryui.com/demos/effect/easing.html
        $pVal.stop(true).animate({width: wD + '%'},1000, 'easeOutBounce');
        if (wD >= 100) clearInterval(pGress) /* run callbacks here */
    }
});

実際のアプリケーションでは、ループを生成する必要がない場合があります。たとえば、ファイルのアップロード中に、フラッシュアプ​​リケーションからファイルサイズが通知され、必要な最大値に達したときに通知されるため、最初のコードはプログレスバーのセッターとゲッターの使用だけでなく、もちろん、全体を再生するもの、たとえばループ。 2つ目は、砂糖を使用した同じ概念の適応です。

59
Luca Filosofi

CSS3を使用したアニメーション

CSS3では、プログレスバーの値を直接管理するためにJavaScriptを使用する必要はありません。これをあなたのスタイルに追加するだけです：

.ui-progressbar-value {
  transition: width 0.5s;
  -webkit-transition: width 0.5s;
}

CSS3 Transitions の詳細をご覧ください。

41
Mikhail

これは、現在受け入れられている@aSeptikの回答で提案されているややぎくしゃくした方法ではなく、スムーズにアニメーション化する方法です。 .progressbar('value, ...)メソッドをバイパスします。

// On load, make the progressbar inside always have round edges:
// (This makes it look right when 100%, and seems nicer all the time to me.)
$("#progressbar .ui-progressbar-value").addClass("ui-corner-right");

new_width = "50px";  // you will need to calculate the necessary width yourself.
$("#progressbar .ui-progressbar-value").animate({width: new_width}, 'slow')
34
Peter

jqueryフォーラムの非常に良い解決策

http://forum.jquery.com/topic/smooth-progressbar-animation

プログレスバーは、たとえば0.1で初期化する必要があります

$("#progressbar .ui-progressbar-value").animate(
{
  width: "67%"
}, {queue: false});
11
fred_

このプラグイン/メソッドを作成してプログレスバーを非常に簡単にアニメーション化し、私にとって非常にうまく機能するので、他のすべての人にとってもうまくいくことを願っています。

(function( $ ) {
    $.fn.animate_progressbar = function(value,duration,easing,complete) {
        if (value == null)value = 0;
        if (duration == null)duration = 1000;
        if (easing == null)easing = 'swing';
        if (complete == null)complete = function(){};
        var progress = this.find('.ui-progressbar-value');
        progress.stop(true).animate({
            width: value + '%'
        },duration,easing,function(){
            if(value>=99.5){
                progress.addClass('ui-corner-right');
            } else {
                progress.removeClass('ui-corner-right');
            }
            complete();
        });
    }
})( jQuery );

そのコードをページの上部に任意の場所に追加し、そのような要素で使用するだけです

$('#progressbar').animate_progressbar(value [, duration] [, easing] [, complete] );

編集：

以下はコードを縮小したバージョンで、読み込みが少し速くなります。

(function(a){a.fn.animate_progressbar=function(d,e,f,b){if(d==null){d=0}if(e==null){e=1000}if(f==null){f="swing"}if(b==null){b=function(){}}var c=this.find(".ui-progressbar-value");c.stop(true).animate({width:d+"%"},e,f,function(){if(d>=99.5){c.addClass("ui-corner-right")}else{c.removeClass("ui-corner-right")}b()})}})(jQuery);
8
Brian Leishman

エレガントなソリューションを次に示します。 Jqueryの進行状況バーの成長

$(function() {
$("#progressbar").progressbar({
value: 1
});
$("#progressbar > .ui-progressbar-value").animate({
width: "37%"
}, 500);
});
3
Jake Smith

次のスクリプトは、プログレスバーをアニメーション化するだけでなく、表示される％valuesを段階的に増減します

            // 'width' can be any number

               $('#progressbar .ui-progressbar-value').animate(
                {
                  width: width + '%'
                },
                {
                  duration: 3000,
                  step: function (now, fx) {
                      $('.leftvalue').html(parseInt(now) + '%');
                      $('.rightvalue').html((100 - parseInt(now)) + '%');
                  }
                });
1
pinkal vansia

単純なネイティブhtml5プログレスでそれを行うことができます。
html：

<progress id="score-progress-bar" value="10" max="100"></progress>

js：

$('#score-progress-bar').animate({value: your_value_from_0_to_100}, {duration: time_in_ms, complete: function(){console.log('done!');}});
1
Sagiv Ofek