在悬停按钮的点击上显示加载gif
在悬停按钮的点击上显示加载gif
提问于 2017-05-01 07:46:47
我有表格，这张表格是用来寄信的。在单击按钮时，发送需要5-10秒(它同时执行许多其他选项，这就是为什么5-10秒)，并且在所有条件成功的情况下，它都显示文本。我需要运行加载gif之间的暂停，并使背景禁用，以改变(或可能模糊效果)。
我读了很多题目，但找不到我的情况。
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-05-01 08:11:53
简单地说，您可以在代码中使用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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43715917
复制相关文章
相似问题
腾讯云开发者
