0

常に 1px を削除する場合、次のコードを使用して、部門全体を 60 秒にわたって減少させる間隔を計算しています。

function startTimer(remainingTime) {
    showProgressBar(true);

    maxWidth = ($('#time').width() - 4);
    progressIntervall = sessionTime / maxWidth * 1000;
    currentProgress = maxWidth * (remainingTime / sessionTime);

    $('#time .progress').width(currentProgress);
    window.setTimeout("decreaseTime()", progressIntervall);

    alert(maxWidth); // = 86
    window.setTimeout("alert($('#time').width());", 100); // = 396
}

function showProgressBar(bol) {
    if (bol) {
        $('#time').show();
        $('#time').removeClass("gray");
    } else 
        $('#time').hide();

}

HTML:

<div id="time" class="gray">
    <div class="progress" style="width: 100%;">&nbsp;</div>
</div>

CSS:

#time
{
    width: 90%;
    max-width: 400px;
}

問題は、showProgressBarの後、ページが要素のサイズを変更するのに時間がかかることです。たとえば、 maxWidthは 366 ではなく 86 です。

これを解決する方法はありますか？

4

1 に答える 1

1

おそらく次のように、残りの効果を.hideandへのコールバックとして渡すとよいでしょう。.show

function startTimer(remainingTime) {
    function restOfAnimation() {
        maxWidth = ($('#time').width() - 4);
        progressIntervall = sessionTime / maxWidth * 1000;
        currentProgress = maxWidth * (remainingTime / sessionTime);

        $('#time .progress').width(currentProgress);
        window.setTimeout("decreaseTime()", progressIntervall);

        alert(maxWidth); // = 86
        window.setTimeout("alert($('#time').width());", 100); // = 396
    }

    showProgressBar(true, restOfAnimation);
}

function showProgressBar(bol, callback) {
    if (bol) {
        $('#time').show(callback);
        $('#time').removeClass("gray");
    } else 
        $('#time').hide(callback);
}

ただし、上記のコードはいくらか改善する必要があります (varはどこにも使用されていません。これはほぼ間違いなく間違いです。decreaseTimeoutに直接渡すことができますsetTimeout)。

于 2012-09-26T07:59:09.390 に答える