Question

我正在完成一项任务。任务是在进度条淡出后显示警告消息。场景是：（1）从自动完成栏中选择某个（2）从日历中选择日期（3）选择日期并按下“提交”按钮后，进度条显示约5秒后淡出。（4）进度条淡出后，会弹出一条警告信息。

我已完成前3个步骤，最后一步的任何提示？请提前帮助你！

好的，我有你的意思。代码太多了。我在这里贴一部分：

    <h2>Pick your gift!</h2>
    <h4>You can select bag, fruit, book, toy, game, dvd and wallet</h4>

    <div class="ui-widget">
       <label for="tags">Your gift: </label>
        <input id="tags"><br><br>
        And which day you would like it?<input type="text" id="datepicker">
       <input id="submit" type="submit" value="Send">
    </div>
    <br/><br/>

   <div id="P1" style="display:none" >

   <div id="progressbar"><div class="progress-label">Loading...</div></div>

  </div>

   <script>
     $(document).ready(function() {
     $("#submit").click(function(){
     $("#P1").show().delay(8000).fadeOut();

   });

    });
  </script>

  ok, here is the progress bar part
  $(function() {
  var progressbar = $( "#progressbar" ),
   progressLabel = $( ".progress-label" );

  progressbar.progressbar({
   value: false,
  change: function() {
     progressLabel.text( progressbar.progressbar( "value" ) + "%" );
    },
   complete: function() {
    progressLabel.text( "Complete!" );
    }
     });
    function progress() {
     var val = progressbar.progressbar( "value" ) || 0;

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

    if ( val < 99 ) {
    setTimeout( progress, 80 );
      }
      }

     setTimeout( progress, 8000 );
      });

Answer 1

进度条淡出？

如果您可以访问该进度条中的值（例如数字％），您可以收听它，当它达到100％时，您就可以显示警告！

Answer 2

你看过jquery文档吗？ http://api.jquery.com/hide/

有更好的方法可以做到这一点，但这种方式相对清晰。

在我最初的回答中，我在5s的时间里逐渐消失了......傻。

尝试类似这样的内容：

$('#submit').on('click', function(e) {
    var hideProg = setTimeout(function() {
      $("#progress-bar").fadeOut('slow', function() {
         alert('progbar faded');
      });
    }, 5000);
    $('#progress-bar').fadeIn('fast', function() {
      hideProg;        
    });
});

进度条淡出后显示警报

2 个答案: