0

次の方法でマウスオーバーイベントでアニメーション化されているプログレスバーがあります:

$("#progressbar .ui-progressbar-value").animate({width: 200}, {duration: 3000},'slow')

次に、マウスアウトイベントでプログレスバーを初期状態にリセットしたいので、マウスオーバーが再度呼び出された場合、アニメーションを再度開始する必要があります。

次のように値をリセットできるようになりました。

('#progressbar').progressbar({value: 0});

しかし、そこから別のマウスオーバーをしても、アニメーションが再び開始されることはありません。最初のアニメーションの前に値が 1 に初期化されるため、問題が発生するのではないかと考えました。ただし、1 に設定してもアニメーションはまったくリセットされません。最後に、最初に0にリセットしてから、初期状態のように1に設定しようとしましたが、成功しませんでした。

フィドル

4

1 に答える 1

1

ロジックの最初の部分が間違っています。.progressbarプログレスバーを正しい元の状態にリセットします。ただし、.animatecss を変更するだけでは、実際にはバーを「進めている」わけではありません。

代わりにマウスが要素の上にある間に、何らかの計算/期間にわたって値を設定する必要があります。

例（編集）：

html

<div id="progressbar"></div>

js

$(function () {
    var progress = 0;
    var updateTime = 30; // ms
    var updateTimeout;

    $("#progressbar").mouseenter(function () {
        updateTimeout = setTimeout(animateFilling, updateTime);
    });

    $("#progressbar").mouseleave(function () {
        progress = 0;
        updateProgressbar();
        clearTimeout(updateTimeout);
    });

    updateProgressbar(); // init the bar

    function animateFilling() {
        if (progress < 100) {
            progress++;
            updateProgressbar();
            updateTimeout = setTimeout(animateFilling, updateTime);
        } else {
            // TODO - done loading
        }
    }

    function updateProgressbar() {
        $("#progressbar").progressbar({
            value: progress
        });
    }
});

更新されたデモはこちら

マウスオーバー/マウスアウトのバグ編集

OPで指摘されているように、mouseoverとmouseoutを使用すると、カーソルがdom要素を離れていなくても進行状況バーが再トリガーされます(その結果、進行状況バーが高速化またはリセットされます)。

これは、プログレス バーの内側の要素と、こちらで説明されているイベント バブリングによるものです。これは、代わりに mouseover / mouseout を使用することで回避できます。

于 2015-05-19T14:28:57.590 に答える