jquery淡入淡出保存數據塊

Question

我在jQuery中遇到了一些麻煩。

我有這樣的代碼：

<div id="divSavingInformation" style="position:absolute;">All changes saved.</div> 
$(function(){ 

     $(document).on("blur","div[contenteditable=true]",function() { 

      var wait = Math.floor(Math.random() * 3000) + 500; 

      $('#divSavingInformation').fadeOut(500, function() { 
       $('#divSavingInformation').html("<i class='fa fa-spinner fa-pulse fa-lg fa-fw'></i> Saving data...").fadeIn(500).delay(5000).fadeOut(500).html("All data saved.").fadeIn(500); 
      }); 

      var field_userid = $(this).attr("id") ; 
      var value = $(this).text() ; 
      $.post('pages/ajax/updateRadio.php' , field_userid + "=" + value, function(data){ 

      }); 
     }); 
    }); 

代碼通過CONTENTEDITABLE DIV觸發。 這裏是一個jsfiddle https://jsfiddle.net/oyv27cce/3/

這不工作，我需要它的方式。 基本上，我需要做的是這樣的：

1. 淡出格命名爲「divSavingInformation」的div
2. 變更內容爲div <i class='fa fa-spinner fa-pulse fa-lg fa-fw'></i> Saving data...
3. 褪色，顯示上述
4. 變化等一些秒，同時顯示div，這將是一個變量，現在我用了5秒。
5. 淡出div的退了出去
6. DIV含量的變化，以All data saved
7. 褪色回來並保持顯示

目前，哪些代碼沒有被淡出，背，但內容不會出現改變。我認爲我使用的是延遲錯誤，也許它會在內容恢復之前將內容更改回All data saved，使其看起來像是從未顯示的那樣。

我不知道我在做什麼，真的可以使用一些幫助。

Answer 1

問題是fadeIn()和​​是異步的，它們排隊等待執行當前運行的函數完成後的效果。您將需要推遲最終的效果，直到函數結束後，擺脫了delay()通話，因爲這將被setTimout()照顧：使用jsbin

$('#divSavingInformation').hide(); 
 
$('#divSavingInformation').html("<i class='fa fa-spinner fa-pulse fa-lg fa-fw'></i> Saving data...</div>").fadeIn(500).fadeOut(5000);; 
 

 
// Defer the following code until after this function has completed. 
 
setTimeout(function(){ 
 

 
    $('#divSavingInformation').html('All data saved.').fadeIn(500); 
 
}, 5000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="divSavingInformation"></div>

Answer 2

您將不得不爲此使用setTimeout（）。

var element = $('div'); 
 

 
element.fadeIn(); 
 

 
setTimeout(function(){ 
 
    element.fadeOut(); 
 
}, 2000);

這將淡入的元件和淡出2000毫秒或2秒後。

您可以使用此：

$阿賈克斯（{ 網址： 「/post/url.php」， 類型： 「POST」， 數據：參數， 成功：successFunction， 錯誤：errorFunction }）;

然後通過使用函數successFunction和errorFunction可以處理這些情況。你可以擴展你的內聯編輯，當它失敗時，你的用戶也知道。 XEditable是一個可以做到這一點的圖書館。