0

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

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

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

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

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

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

小提琴

4

1 回答 1

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

在这里更新了演示

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

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

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

于 2015-05-19T14:28:57.590 回答