javascript - 显示 div 时开始进度条

Question

我正在使用一个简单的 jQuery 进度条；但我在页面加载时默认隐藏的 div 中使用它，然后在表单完成后显示。问题是；进度条的进度仅取决于用户完成表单的速度。因为进度条是在页面加载时开始的$(document).ready(function() {

如何设置它并在显示 div 后调用我的进度条加载？例如。表单已完成 > 下一个 div 显示 THEN 我的进度条开始。下面是我用于栏的代码。

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

任何指针？

Answer 1

试试这个演示。

基本上你需要在表单上绑定提交事件。在事件处理函数中显示进度条并做任何你想做的事。

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
}