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，你实际上并没有“进步”。吧。

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

示例（已编辑）：

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

鼠标悬停/鼠标移除错误编辑

如OP所述，即使光标没有离开dom元素，使用鼠标悬停和mouseout也会重新触发进度条（导致加速或重置进度条）。

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

jQuery Progress Bar：animate-reset-animate

1 个答案: