0

我正在尝试加载一个在加载屏幕/动画结束后具有提交按钮的 html 表单。

简而言之，第一个加载屏幕或动画应该运行......它应该运行 15 秒......

然后，表单应该加载。

这是我的代码

<div id="load">
  <span>Loading...</span>
 </div>
<div id="loader">
   <form method="POST" action="submit.php">
    <button type="button" class="btn btn-primary" id="btnsubmit" name="btnsubmit">Submit </button>
    </form>
</div>

这是我的jQuery

$(window).load (function (){
  $('#loader').fadeOut ('slow', function(){
  $('#load').fadeIn ('slow');},15000);});

我的代码不起作用...有人可以帮助我吗？请

4

1 回答 1

0

函数 .fadeOut ( https://api.jquery.com/fadeout/ ) 只有参数 [duration ] [, easing ] [, complete ]。因此，必须使用 Javascript 管理超时。

#load 默认使用 CSS 隐藏。超时函数等待的时间与 waitTimeUntilFadeOut 中定义的时间一样长。然后#loader 淡出，#load 在整个函数中淡入。

$(window).on('load', function(){
  var waitTimeUntilFadeOut = 2000 ;
  setTimeout(function() {
    $('#loader').fadeOut ('slow', function() {
      $('#load').fadeIn ('slow');
    });
  }, waitTimeUntilFadeOut);
});
#load {
display:none;
}
<html>
<body>
<div id="loader">loader</div>
<div id="load">load</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>

于 2021-06-07T17:12:14.573 回答