淡出，通过 AJAX 更新，使用 Prototype 淡入 div
我有一个 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 与 script.aculo.us 一起使用
I have a div whose contents I want to update by AJAX. To make the transition smooth, I'd like to fade out the old contents, then update it with the AJAX response, then fade it back in.
My first attempt is as follows; but of course the AJAX can complete before the fade() call, resulting in appear() not firing properly and the end-state being faded out. How can I make this work as I want?
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()}
});
Edit: For completeness, I'm using Prototype with script.aculo.us
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
我已经找到了我想要的解决方案，尽管文档并没有让它变得容易。事实证明，所有 script.aculo.us Effects 都有一个回调集，包括 <代码>完成后。我的代码变成了：
I have found the solution I wanted, although the docs didn't make it easy. Turns out, all script.aculo.us Effects have a set of callbacks, including
afterFinish. My code has become:到目前为止，最难以维护的解决方案是使用计时器和标志来处理出现，以查看淡入淡出和请求是否已完成。
更新和淡入淡出后，可以通过函数调用来更改计时器。
在这两种情况下，最终都会陷入混乱。
Most unmaintainable solution so far was to handle appear with timer and flags to see if both fade and request had completed.
Timer could be changed with function call after update and fade.
In both cases it tends to end in mess.
我认为更好的方法是首先进行 AJAX 调用。然后，完成后，淡出 div。淡入淡出完成后，替换内容并淡入淡出。
I think the better approach is to make the AJAX call first. Then, when it is done, fade the div out. When the fade is done, replace the contents and fade it back in.