jQuery进度栏：动画重置动画

Question

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

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

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

我已经可以重置如下值：

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

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

小提琴

Answer 1

您的逻辑的第一部分是错误的。 .progressbar将进度.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
        });
    }
});

在这里更新了演示

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

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

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