4

JQuery リファレンス @ http://api.jquery.com/animate/から:

 $('#book').animate({
    opacity: 0.25,
    left: '+=50',
    height: 'toggle'   }, 5000, function() {
    // Animation complete.   
 });

実際の CSS プロパティしか変更できないようですが、JQuery オブジェクトのプロパティもアニメーション化できたらいいのにと思います。例として、プログレスバーの「値」プロパティをアニメーション化したいと思います:

http://jqueryui.com/demos/progressbar/#option-value

//setter
$('.selector').progressbar('option', 'value', 37);

プログレスバーのこの「値」プロパティをアニメーション化する方法が見つかりませんでした。そうする方法はありますか?

手伝ってくれてありがとう..

4

2 に答える 2

5

値をアニメーション化する場合は、javascript のsetInterval() および clearInterval()メソッドを使用できませんか?

次のようなことができます：

var progressBar = $('#progress');           
var index=0;
var maxCount=100;
var theInterval = setInterval (function(){
    progressBar.progressbar({value:index});
    if (index == maxCount) {
        clearInterval(theInterval);
    }
    index++;
}, 100 );

上記の例では、setInterval 関数は 100 ミリ秒ごとに起動し、そのたびに値を 1 ずつ増やします。100 に達すると、clearInterval 関数がアニメーションを停止します。

于 2010-02-16T21:04:59.367 に答える
4

次のリンクが役に立つかもしれません: http://acko.net/blog/abusing-jquery-animate-for-fun-and-profit-and-bacon。

まさにあなたが望んでいたものではありませんが、プログレスバーを更新するために独自のステップ関数を回避して実装することができました.

var step_def = $.fx.step._default;

$.fx.step._default = function (fx) {
    if ( fx.prop != 'progress' ) return step_def(fx);

    fx.elem[fx.prop] = fx.now;
    $(fx.elem).progressbar('option', 'value', fx.now);
};

// Now call animate
$('.selector').progressbar('option', 'value', 0)[0].progress = 0;
$('.selector').animate({ progress: 100 }, { duration: 1000 });
于 2010-02-20T23:11:55.847 に答える