在悬停时单击按钮显示加载 gif答案

【问题标题】：Show loading gif on click of button on hover在悬停时单击按钮显示加载 gif
【发布时间】：2017-05-01 16:35:14
【问题描述】：

我有表格，此表格用于发送邮件。单击按钮需要 5-10 秒才能发送（它同时执行许多其他选项，这就是为什么需要 5-10 秒），并且在所有条件成功时它会显示文本。我需要在此暂停之间运行加载 gif 并使背景禁用更改（或者可能是模糊效果）。

附：不是重复我阅读了很多主题，但找不到我的状况。

【问题讨论】：

那么你想要的是当有人点击按钮时，你想要一个加载动画和一个背景效果。正确的？如果是这样，您是否看过stackoverflow.com/questions/27026323/…？

【解决方案1】：

您可以在代码中使用 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>

【讨论】：