Question

我有一个关于如何正确设置此代码动画的问题。我正在尝试制作一个基于我构建的小算法动画的进度条，但它不是动画。这是我的代码：

function WidthGenerator() {
"use strict";
var question = prompt("Enter number of hours worked:", "Enter here");
if (isNaN(Number(question)) === false) {
    var generateMultiplier = Math.ceil(Math.random() * 4);
    alert(generateMultiplier);
    var newWidth = question * generateMultiplier;
    alert(newWidth);
    return newWidth;
} else {
    question = prompt("That is not a number; Enter the number of hours worked.", "Enter here");
}
}

$(document).ready(function () {
"use strict";
$('#Progress-Button').click(function () {
    var animateWidth = WidthGenerator();
    var widthCheck = $('#Progress-Bar').css('width');
    if (widthCheck < animateWidth) {
        $('#Progress-Bar').animate({
            width: '+=1%'
        }, 1000);
    } else {
        $('#Progress-Bar').stop();
    }
});
});

另外，我试图弄清楚每次触发按钮时如何增加它。示例：用户生成20％的进度条填充，然后再次运行生成器并生成额外的30％。我怎样才能让进度条显示50％？

谢谢！

Answer 1

与@Jabaluza上面指出的一致。

更改：$('#Progress-Bar').css('width'); 致：$('#Progress-Bar').outerWidth();

不确定这是否能为您提供预期的结果，但第一个是返回带有＆＃39; px＆＃39;在其中，后者返回您正在寻找的号码。

Jquery自定义进度条没有动画

1 个答案: