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

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

示例（已编辑）：

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 元素，使用 mouseover 和 mouseout 也会重新触发进度条（导致加速或重置进度条）。

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