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？另外，如何为此添加fadeIn效果？比如当页面加载时图像淡入？

提前致谢。

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

不能真的对它起作用，因为它不会影响小提琴吗？

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

2 个答案: