UpdatePanelAnimationExtender控件用于在UpdatePanel发生更新时，产生动画效果。
下面来看一个示例：
1)在VS2005中新建一个ASP.NET AJAX-Enabled Web Project项目工程，命名为UpdatePanelAnimationExtender1。
2)在页面上拖放一个UpdatePanel,在其里拖放一个Label用于显示时间。然后再拖放3个CheckBox，用于设置不同的动画效果。
代码如下：
1 <div > </div>
3)然后在页面上拖放一个UpdatePanelAnimationExtender，用于控制动画效果。
代码如下：
<cc1:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender1" BehaviorID="animation" runat="server" TargetControlID="UpdatePanel1">
<Animations>
<OnUpdating>
<Sequence>
<%-- Store the original height of the panel --%>
<ScriptAction Script="var b = $find('animation'); b._originalHeight = b._element.offsetHeight;" />
<%-- Disable all the controls --%>
<Parallel duration="0">
<EnableAction AnimationTarget="btnUpdate" Enabled="false" />
<EnableAction AnimationTarget="effect_color" Enabled="false" />
<EnableAction AnimationTarget="effect_collapse" Enabled="false" />
<EnableAction AnimationTarget="effect_fade" Enabled="false" />
</Parallel>
<StyleAction Attribute="overflow" Value="hidden" />
<%-- Do each of the selected effects --%>
<Parallel duration=".25" Fps="30">
<Condition ConditionScript="$get('effect_fade').checked">
<FadeOut AnimationTarget="up_container" minimumOpacity=".2" />
</Condition>
<Condition ConditionScript="$get('effect_collapse').checked">
<Resize Height="0" />
</Condition>
<Condition ConditionScript="$get('effect_color').checked">
<Color AnimationTarget="up_container" PropertyKey="backgroundColor"
EndValue="#FF0000" StartValue="#40669A" />
</Condition>
</Parallel>
</Sequence>
</OnUpdating>
<OnUpdated>
<Sequence>
<%-- Do each of the selected effects --%>
<Parallel duration=".25" Fps="30">
<Condition ConditionScript="$get('effect_fade').checked">
<FadeIn AnimationTarget="up_container" minimumOpacity=".2" />
</Condition>
<Condition ConditionScript="$get('effect_collapse').checked">
<%-- Get the stored height --%>
<Resize HeightScript="$find('animation')._originalHeight" />
</Condition>
<Condition ConditionScript="$get('effect_color').checked">
<Color AnimationTarget="up_container" PropertyKey="backgroundColor"
StartValue="#FF0000" EndValue="#40669A" />
</Condition>
</Parallel>
<%-- Enable all the controls --%>
<Parallel duration="0">
<EnableAction AnimationTarget="effect_fade" Enabled="true" />
<EnableAction AnimationTarget="effect_collapse" Enabled="true" />
<EnableAction AnimationTarget="effect_color" Enabled="true" />
<EnableAction AnimationTarget="btnUpdate" Enabled="true" />
</Parallel>
</Sequence>
</OnUpdated>
</Animations>
</cc1:UpdatePanelAnimationExtender>
4)对Page_load和"btnUpdate"按钮添加事件处理。
代码如下：
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
this.Label1.Text = DateTime.Now.ToString();
}
}
protected void btnUpdate_Click(object sender, EventArgs e)
{
this.Label1.Text = DateTime.Now.ToString();
}
5)按下CTRL+F5,在浏览器中查看效果。
效果图如下：