Javascript 更新进度条，然后切换可见的 div

Question

我有一个通过 PHP 网页抓取生成的页面。由于内容的收集会导致延迟，因此我尝试在加载发生时引入引导进度条。

我没有将栏链接到任何实际的加载阶段，我只是运行它 3 秒钟，然后获取代码来隐藏/显示相关的 div(第一个 div 包含加载栏，第二个包含内容)。

我有以下代码，但 php-content div 立即出现而不是延迟。 chrome 中的 javascript 控制台没有输出。

<script type="text/javascript">
    $(document).ready(function(){
        $("#loader").show();
        $("#php-content").hide();
        counter = 0;
        run();
    });

    function update(value) {
        $("#loadingBar").attr("style","width:"+value+"%");
        $("#loadingBar").attr("aria-valuenow",value);
    }

    function run() {
        if (counter <= 3000) {
            update(counter);
            counter+=10;
            setTimeout(run(), 10);
        } else {
            $("#loader").hide();
            $("#php-content").show();
        }

    }
</script>

以及 HTML 部分:

<div id="loader">
                <div class="progress">
                    <div id="loadingBar" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="3000" style="width: 0%">
                        <span class="sr-only"></span>
                    </div>
                </div>
            </div>
            <div id="php-content">
                <h2>Current Weather Conditions:</h2>
                <table class="table table-bordered">
                    <?php include 'php/scrape.php' ?>
                </table>
            </div>

更新 - 请参阅下面我的回答。发布这个问题后我找到了解决方案。

Answer 1

我对您的代码做了一些细微的更改，我认为这对您有帮助，这里是下面的代码

HTML代码

<div id="loader">
                <div class="progress">
                    <div id="loadingBar" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="3000" style="width: 0%">
                        <span class="sr-only"></span>
                    </div>
                </div>
            </div>
            <div id="php-content">
                <h2>Content:</h2>
                <table class="table table-bordered">
                    new content
                </table>
            </div>

CSS代码

#loadingBar{background: red;float: left;min-height: 20px;}
#php-content{display:none;}

Jquery 代码

jQuery(document).ready(function(){
        jQuery("#php-content").animate({'opacity' : '0'});
        jQuery("#loader").animate({'opacity' : '1'});
        counter = 0;        
        run();
    });

    function update(value) {
        jQuery("#loadingBar").animate({width:value+"px"});
        jQuery("#loadingBar").attr("aria-valuenow",value);
    }


    function run() {        
        if (counter <= 800) {
            jQuery("#loader").animate({'opacity' : '1'});
            jQuery("#php-content").animate({'opacity' : '0'});            
            update(counter);
            counter+=10;
            setTimeout(run(), 10);
        } else {            
            jQuery("#loader").animate({'opacity' : '0'});
            jQuery("#php-content").show();
            jQuery("#php-content").animate({'opacity' : '1'});
        }

    }

演示链接 http://jsfiddle.net/kishan_web/b2jzu4er/