Question

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

开始的

我如何设置它并在显示div之后调用我的进度条加载？例如。表格是完整的＆gt;下一个div显示然后我的进度条开始。下面是我正在使用的代码。

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

试试这个demo。

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

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时，进度条开始

1 个答案: