Javascript 进度条在显示div时开始

我使用了一个简单的jQuery进度条；但是我在一个div中使用它，这个div在页面加载时默认是隐藏的，然后在表单完成后显示。问题是；进度条的进度取决于用户完成表单的速度。因为进度条在页面加载时以

$（document）.ready（function（）{

我如何设置它，并在div显示其所在位置后调用我的进度条进行加载？例如，Form is complete>Next div shows然后我的进度条开始。下面是我用于进度条的代码

var progress = setInterval(function() {
    var $bar = $('.bar');

    if ($bar.width()==400) {
        clearInterval(progress);
        $('.progress').removeClass('active');
    } else {
        $bar.width($bar.width()+40);
    }
    $bar.text($bar.width()/4 + "%");
}, 900);

有什么指示吗？

试试这个

基本上，您需要在表单上绑定事件。在事件处理函数中，显示进度条并执行任何您想要的操作

function showProgressBar(){
    var progress = setInterval(function() {
        $('#form').hide();
        var $bar = $('.bar');
        $bar.show();  // show it here

        if ($bar.width()==400) {
            clearInterval(progress);
            $('.progress').removeClass('active');
        } else {
            $bar.width($bar.width()+40);
        }
        $bar.text($bar.width()/4 + "%");
    }, 900);

    return false;
}

$(window).load(function(){
    $('#form').submit(showProgressBar); // bind the submit event
}

---

为什么不能在显示div而不是$（文档）时启动进度条.ready函数？所说的“form is completed”是指用户何时提交表单？是的，这就是我所想的@ChrisP编写该函数的最佳方式；我应该使用if语句并说“如果显示此div，请加载此脚本”。