顯示加載gif點擊按鈕上的懸停

我有表格，這種形式是發送郵件。點擊按鈕需要5-10秒的時間發送（它同時做很多其他的選項，這就是爲什麼5-10秒），併成功顯示文本的所有條件。我需要在此暫停之間運行加載gif，並使背景禁用更改（或者可能會模糊效果）。顯示加載gif點擊按鈕上的懸停

P.S.這是不是dublicate我讀了很多話題，但無法找到我的情況。

來源

2017-05-01 Orik3ll0

所以，你想要的是，當有人點擊這個按鈕，你想要一個加載動畫和背景效果。正確？如果是這樣，你看看http://stackoverflow.com/questions/27026323/show-loading-gif-after-clicking-form-submit-using-jquery？ –

只要你可以在你的代碼並在按鈕的點擊使用gif圖片，顯示圖像

$("#button").click(function() { 
 
    $(".container").css("opacity", 0.2); 
 
    \t $("#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(){ 
 
    \t    $(".container").css("opacity", 1); 
 
    \t \t  $("#loading-img").css({"display": "none"}); 
 
    \t \t },3000);   
 
});

#loading-img { 
 
\t 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>

來源

2017-05-01 08:11:53

http://jsfiddle.net/hnk6bLbt/142/ –

顯示加載gif點擊按鈕上的懸停

回答

相關問題