0

スライド式のプログレスバーを実装しようとしています。少しずつ進捗を増やしていきたいです。

私は試してみます：

HTML

<div id="progressKeeper">
<div id="progress"></div>
</div>

CSS

#progressKeeper {
    width: 800px;
    height: 25px;
    border: 3px double #003366;
    margin: 0px 10px;
    padding: 3px;
}

JavaScript

var el = $('#progress');
var steppedIncreaseAmount = ($('#progressKeeper').width()) / 100;
for (var i = 0; i < 100; i++) {
    el.width(el.width() + steppedIncreaseAmount+ 'px');
}

このjsfiddleを参照してください

しかし、それは突然増加します。フェードのような滑らかな効果が欲しいです。

4

5 に答える 5

3

これらの値の更新の間に何らかの遅延を設定する必要があります。ただし、jQuery を使用しているように見えるため、次のように簡単に実行できます。

$(document).ready(function() {
    var el = $('#progress');
    el.animate({
        width: "100%"
    }, 1800);
});​

http://jsfiddle.net/VbVBP/2/

別の方法として、現在行っているセットアップを本当に維持したい場合は、次のsetTimeoutように for ループにカウンターを追加するだけです。

var el = $('#progress');
var steppedIncreaseAmount = ($('#progressKeeper').width()) / 100; 
for (var i = 0; i < 100; i++) {
    setTimeout(function(){
        el.width(el.width() + steppedIncreaseAmount+ 'px');
    }, 1+i*20);
}​

http://jsfiddle.net/VbVBP/3/

于 2012-12-27T18:21:25.127 に答える
2

単純な for ループは、目が追いつかないほど速く値を更新しています....

setInterval基本的な JS アニメーションのようなタイマー機能を使用できます。これは次のように機能します。

var increase = setInterval(function(){

    el.width(el.width() + steppedIncreaseAmount+ 'px');

}, 50); //50 is the interval in ms, i.e the function inside the interval gets called 20 times per second

アニメーションが終了したら (進行状況が 100% の場合)、間隔をキャンセルする必要があります。

clearInterval(increase);

setIntervalで動作するフィドルとMDN ドキュメントを参照してください

JavaScript アニメーションの領域をさらに深く掘り下げたい場合は、以下についても学びたいと思うかもしれません。requestAnimationFrame

于 2012-12-27T18:21:45.687 に答える
1

アニメーションを使ってみてください:

el.animate({ width: "+=" + steppedIncreaseAmount }, 500);
于 2012-12-27T18:24:13.730 に答える
0

私が理解できることのデモをセットアップしました。http://jsfiddle.net/VbVBP/5/ 更新の時間を 300ms に設定し、その更新アニメーションの速度も 300 に設定して、常にアニメーション化されるようにします。

ランダムな値を使用する代わりに、操作が完了したパーセンテージを使用します。

<div id="progressKeeper">
<div id="progress"></div>
</div>​

var randomPercentInt = 0;

function percentComplete(percent) {
    var el = $('#progress');
    el.animate({
        width: percent
    }, 300);
}

$(document).ready(function() {
    percentComplete('0%');
});

function randomPercent() {
    var randomNumber = Math.floor(Math.random() * 10);
    randomPercentInt += randomNumber;
    console.log(randomPercentInt);
    if(randomPercentInt>100)
    {
        randomPercentInt = 100;
        clearInterval(clearme);
    }
    percentString = randomPercentInt.toString() + '%';
    percentComplete(percentString);
}
clearme = setInterval(randomPercent, 300);​
于 2012-12-27T18:55:51.547 に答える
0

あ、これには JavaScript を使わないでください。CSS3アニメーションだけでできます。

@-webkit-keyframes progress { 
    from { }
    to { width: 100% }
}

進行状況バー:

-webkit-animation: progress 2s 1 forwards;
-moz-animation: progress 2s 1 forwards;
-ms-animation: progress 2s 1 forwards;
animation: progress 2s 1 forwards;

作業例: http://jsfiddle.net/VbVBP/4/

于 2012-12-27T18:41:28.363 に答える