我有表格,这个表格是用来发邮件的。单击按钮需要 5-10 秒才能发送(它同时执行许多其他选项,这就是为什么需要 5-10 秒)并且在所有条件成功时它会显示文本。我需要在此暂停之间运行加载 gif 并使背景禁用更改(或可能模糊效果)。
附言这不是重复我阅读了很多主题,但找不到我的条件。
最佳答案
简单地说,您可以在代码中使用 gif 图像并单击按钮, 展示你的形象
$("#button").click(function() {
$(".container").css("opacity", 0.2);
$("#loading-img").css({"display": "block"});
//here palce your code
//i set timeout that you can view the change
//you must use below code without setTimeout function
setTimeout(function(){
$(".container").css("opacity", 1);
$("#loading-img").css({"display": "none"});
},3000);
});
#loading-img {
background: url("http://www.chimply.com/images/samples/classic-spinner/animatedEllipse.gif") center center no-repeat;
display: none;
height: 50px;
width: 50px;
position: absolute;
top: 33%;
left: 1%;
right: 1%;
margin: auto;
}
.container{
height: 150px;
background: #000;
color: #fff;
}
.group {
position: relative;
width: 70%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="group">
<div class="container">container</div>
<div id="loading-img"></div>
<button id="button">Submit</button>
</div>
关于javascript - 在悬停时单击按钮显示加载 gif,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43715917/