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

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

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

我已经可以重置如下值:

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

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

小提琴

===============>>#1 票数: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来避免这种情况。

  ask by Konstantin translate from so

未解决问题?本站智能推荐: