Question

我正在尝试解决双重提交表单问题。我的解决方案是加载CSS代码onClick，以在屏幕中央添加灰色叠加层和动画加载图标。

我的问题是，如何为叠加层和图标添加setTimeout？我只希望CSS代码运行大约6秒钟，然后用户才能重新获得对表单的访问权限。

#cover-spin {
  position: fixed;
  width: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.7);
  z-index: 9999;
  display: none;
}

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

#cover-spin::after {
  content: '';
  display: block;
  position: absolute;
  left: 48%;
  top: 40%;
  width: 40px;
  height: 40px;
  border-style: solid;
  border-color: black;
  border-top-color: transparent;
  border-width: 4px;
  border-radius: 50%;
  -webkit-animation: spin .8s linear infinite;
  animation: spin .8s linear infinite;
}

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>

<body>
  <div id="cover-spin"></div>
  <button onclick="$('#cover-spin').show(0)">Submit</button>
</body>

</html>

Answer 1

回答明确的问题

如何为叠加层和图标添加setTimeout

在特定时间间隔（以毫秒为单位）之后，使用setTimeout来执行与显示叠加图相反的操作：

$('#cover-spin').show();
setTimeout(function() { $('#cover-spin').hide(); }, 6000);

将现有按钮onclick更新为：

<button onclick="$('#cover-spin').show();setTimeout(function() { $('#cover-spin').hide(); }, 6000);">Submit</button>

回答暗示问题：

提交完成后如何隐藏进度叠加层

$.post提供了回调函数，但也返回了promise。不必担心承诺，只需拥有.done方法即可使用：

$.post(url, data)
    .done(function(result) { 
        $("#cover-spin").hide(); 
    });

Answer 2

所以，有一个叫做animation-duration

的东西

因此，只需在要调用动画的CSS内键入以下内容即可：

animation-duration: 6s;

如何使CSS代码运行一定的时间？

2 个答案: