Question

我有一个div，其内容我想通过AJAX更新。为了使转换顺利进行，我想淡出旧内容，然后用AJAX响应更新它，然后将其淡入。

我的第一次尝试如下;但是当然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()}
          });

编辑：为了完整起见，我使用Prototype with script.aculo.us

Answer 1

我找到了我想要的解决方案，尽管文档并不容易。事实证明，所有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)}
            });

Answer 2

到目前为止，大多数无法维护的解决方案是使用计时器和标志进行处理，以查看淡入淡出和请求是否已完成。

更新和淡出后，可以通过函数调用更改定时器。

在这两种情况下，它往往会陷入混乱。

Answer 3

我认为更好的方法是首先进行AJAX调用。然后，当它完成后，淡出div。淡入淡出完成后，更换内容并将其淡入淡出。

淡出，通过AJAX更新，使用Prototype淡入div

3 个答案: