为什么我的进度条在开始加载之前显示完整的进度值

Question

我使用 jQuery UI 制作了一个进度条。这是查看它的链接：DEMO

效果很好，就是有问题。在代码中我有setTimeout( progress, 2000 );，这意味着它必须等待 2 秒才能启动。但在此期间，它显示 .ui-progressbar-value 的背景，当整个进度完成时必须可见。 2 秒后它会像往常一样隐藏并进步星星。

有趣的是，当我在 JSFiddle 上尝试它时，它没有显示这个类并且运行良好。所以在浏览器中只有这个问题。 Here is the JSFiddel link

这是我的 js 代码：

$(function() {
    var progressbar = $( "#progressbar" ),
      progressLabel = $( ".progress-label" );

    progressbar.progressbar({
      value: false,
      change: function() {
        progressLabel.text( progressbar.progressbar( "value" ) + "%" );
      },
      complete: function() {
        progressLabel.text( "100%" );
        $(".loader").delay(1000).fadeOut(750);
      }
    });

    function progress() {
      var val = progressbar.progressbar( "value" ) || 0;

      progressbar.progressbar( "value", val + 1 );

      if ( val < 100 ) {
        setTimeout( progress, 100 );
      }

    }

    setTimeout( progress, 2000 );
  });

还有 CSS：

.enterance{
    position:absolute;
    overflow:hidden;
    left:0;
    top:0;
    background-color:black;
    width:100%; 
    height:100%;
    z-index:10;
    color:rgba(255,255,255,1.00);
}
.enterance .loader{
    position:absolute;
    width:600px;
    height:500px;
    top:50%;
    left:50%;
    margin:-250px 0 0 -300px;
}
.ui-progressbar-value {
    background:url(http://goo.gl/V9dAfn) no-repeat;
    width:600px;
    height:429px;
    border:0;
}
.ui-progressbar{
    background:url(http://goo.gl/rBH0N1) no-repeat;
    background-size:cover;
    width:600px;
    height:429px;
    border:0;
}
.ui-progressbar .ui-progressbar-value{margin:0;}
.progress-label{
    font-size:90px;
    font-family: 'News Cycle', sans-serif;
    color:#FFFFFF; 
    right:0px; 
    position:absolute;
}

那么我怎么能在它等待 2 秒时不显示这个 .ui-progressbar-value？此外，我怎样才能为此添加淡入淡出效果？就像页面加载时图像淡入一样？

提前致谢。

Answer 1

试试这个（除非你有问题，否则无法确定）：

$(function() {
    var progressbar = $( "#progressbar" ),
      progressLabel = $( ".progress-label" );

    progressbar.progressbar({
      value: false,
      change: function() {
        progressLabel.text( progressbar.progressbar( "value" ) + "%" );
      },
      complete: function() {
        progressLabel.text( "100%" );
        $(".loader").delay(1000).fadeOut(750);
      }
    });

    function progress() {
      var val = progressbar.progressbar( "value" ) || 0;

      progressbar.progressbar( "value", val + 1 );

      if ( val < 100 ) {
        setTimeout( progress, 100 );
      }
    }

    progressbar.progressbar( "value", 0 );
    setTimeout( progress, 2000 );
  });

Answer 2

尝试删除“$(function()”并只运行纯代码？

var progressbar = $( "#progressbar" ),
      progressLabel = $( ".progress-label" );

    progressbar.progressbar({
      value: false,
      change: function() {
        progressLabel.text( progressbar.progressbar( "value" ) + "%" );
      },
      complete: function() {
        progressLabel.text( "100%" );
        $(".loader").delay(1000).fadeOut(750);
      }
    });

    function progress() {
      var val = progressbar.progressbar( "value" ) || 0;

      progressbar.progressbar( "value", val + 1 );

      if ( val < 100 ) {
        setTimeout( progress, 100 );
      }

    }

    setTimeout( progress, 2000 );

因为它不影响小提琴，所以真的不能用它吗？