淡出，由AJAX更新，使用原型淡入div使用原型

我有一個div，其內容我想通過AJAX更新。爲了平滑過渡，我想淡出舊內容，然後用AJAX響應更新它，然後淡入。淡出，由AJAX更新，使用原型淡入div使用原型

我的第一次嘗試如下;但當然AJAX可以在fade()調用之前完成，導致appear()不能正確觸發，並且結束狀態消失。我如何根據需要進行這項工作？

target = $('card_text_' + index); 
new Ajax.Request('/games/card_text', 
     {asynchronous:false, 
      evalScripts:true, 
      method:'get', 
      parameters:'type=' + value, 
      onCreate: function(){target.fade()}, 
      onSuccess: function(e){target.update(e.responseText).appear()} 
      });

編輯：爲了完整起見，我使用的原型，script.aculo.us

來源

2011-01-10 Chowlett

我發現了我想要的解決方案，儘管文檔並不容易。原來，所有script.aculo.us特效都有set of callbacks，包括afterFinish。我的代碼已經變成：

target = $('card_text_' + index); 
new Effect.Fade(target, {afterFinish: function(){ 
    new Ajax.Updater(target, '/games/card_text', 
      {asynchronous:false, 
      evalScripts:true, 
      method:'get', 
      parameters:'type=' + value,   
      onSuccess: function(e){new Effect.Appear(target)} 
      });

來源

2011-01-12 17:22:43 Chowlett

最難以維護的解決方案至今是處理與顯示計時器和標誌，看是否都褪色，並要求有完成。

定時器在更新和淡入後可以通過函數調用進行更改。

在這兩種情況下，它往往會陷入混亂。

來源

2011-01-10 17:34:44

我認爲更好的方法是首先進行AJAX調用。然後，完成後，淡出div。淡入淡出完成後，請將內容替換並重新淡入。

來源

2011-01-10 17:59:30 JohnO

有兩個問題：1 - 我希望它立即淡出作爲一個明確的進度指示器。 2 - fade（）異步完成，所以`elem.fade（）; elem.appear（）會同時觸發兩種效果。 – Chowlett 2011-01-10 18:39:36

淡出，由AJAX更新，使用原型淡入div使用原型

回答

相關問題