Asp.net 为UpdatePanel设置动画

我尝试过使用UpdatePanelAnimationExtender，它是Ajax控件工具包的一部分，但我对它最大的不满是它没有等到动画完成后再加载新内容

我想做如下工作：

启动对服务器的异步请求 完全淡出UpdatePanel中的内容 一旦UpdatePanel完全淡出并返回新内容，请加载新内容 淡入UpdatePanel 我可以将以下代码放在启动回发的触发器上：

OnClientClick="Sys.WebForms.PageRequestManager.getInstance().add_pageLoading(PauseForFade); FadeOut();"

这样，我还可以使用以下JavaScript来取消任何进一步的处理：

function PauseForFade(sender, args) { args.set_cancel(true); }

---

我的问题是，我不知道如何恢复加载一旦我的淡入淡出动画完成。任何帮助都将不胜感激。

我想我找到了一个有效的解决方案。如果你们有更好的解决方案，请随时插话

在我的按钮中，我放置了以下OnClientClick事件处理程序：

OnClientClick="return FadeOut();"

这将调用下面的淡出方法，如果当前内容淡入并可见，该方法将返回false。返回false将完全取消UpdatePanel将调用的异步回发

动画完成后，我将IsFadedIn变量设置为false，然后再次单击按钮。我知道，单击按钮的代码目前不兼容跨浏览器，这只是一个概念证明，因此需要修复其中的一部分。由于IsFadedIn被设置为false，这次FadeOut方法不会返回false，因此UpdatePanel执行回发

我已经在pageLoaded事件上附加了一个事件处理程序，这样我可以在加载完成后淡入新内容

好处：我现在可以在加载新内容之前完成动画

坏消息：在开始回发过程之前，我必须等待动画完成，因此用户实际上需要等待更长的时间

var opacity = 100;
var IsFadedIn = true;

Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(FadeIn);
function FadeIn(sender, args) {
  if (!IsFadedIn) {
    if (opacity < 100) {
      opacity += 15;
      $get("LowerPageContent").style.filter = "alpha(opacity=" + opacity + ")";
      setTimeout(FadeIn, 1);
    } else {
      $get("LowerPageContent").style.filter = "alpha(opacity=100)";
      IsFadedIn = true;
    }
  }
}
function FadeOut() {
  if (IsFadedIn) {
    if (opacity > 0) {
      opacity -= 15;
      $get("LowerPageContent").style.filter = "alpha(opacity=" + opacity + ")";
      setTimeout(FadeOut, 1);
    } else {
      $get("LowerPageContent").style.filter = "alpha(opacity=0)";
      IsFadedIn = false;
      $get("TestButton").click();
    }
    return false;
  }
}