jQuery 进度条：动画重置动画

Question

我有一个进度条，它通过以下方式在鼠标悬停事件中进行动画处理：

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

然后在 mouseout 事件中我想将进度条重置为其初始状态，然后如果再次调用 mouseover 则动画必须重新开始。

我已经到了可以像这样重置值的地步：

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

但是从那里开始，另一个鼠标悬停不会再次启动动画。我认为问题可能是因为在第一个动画之前该值被初始化为 1。但是，将其设置为 1 根本不会重置动画。最后我试着先把它重置为0，然后像初始状态一样设置为1，但没有成功。

FIDDLE

Answer 1

你的第一部分逻辑是错误的。 .progressbar 将进度条重置为原始状态，这是正确的。但是，对于 .animate，您只是在更改 css，您实际上并不是 'progressing' 栏。

您应该在某些计算/时间段内设置一个值，而鼠标悬停在元素上。

示例（已编辑）：

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
        });
    }
});

已更新demo here

Mouseover / mouseout 错误编辑

正如 OP 所指出的，使用 mouseover 和 mouseout 会重新触发进度条，即使光标没有离开 dom 元素（导致加速或重置进度条）。

这是由于进度条的内部元素和事件冒泡，as described here。我们可以通过使用 mouseover / mouseout 来避免这种情况。

jQuery 进度条：动画重置动画

jQuery Progress Bar: animate-reset-animate

jquery

jquery-ui

jquery-ui-progressbar

jquery-animate