shepherdweb.com

The ASP.NET AJAX Control Toolkit includes a control called the AnimationExtender which provides a framework for adding animation effects to web pages. One ability of the AnimationExtender is to execute code based on a condition using the Condition Animation rules. Condition Animation will “play” specific child animations based on the boolean result of the conditionScript.

What it does…

If a checkbox is checked then the backgroundColor of the parentNode is changed to add emphasis to the checked items. The conditionScript is true causing the first child animation to play.

When a checkbox is unchecked, the backgroundColor is reset. The conditionScript returns false causing the second child animation to play.

Code Snippet…


<asp:CheckBox ID="chk1" runat="server" Text="Puppy" />
<cc1:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="chk1">
<Animations>
<OnClick>
<Condition ConditionScript="document.getElementById('chk1').checked;">
<ScriptAction Script="document.getElementById('chk1').parentNode.style.backgroundColor = '#ADDA59';" />
<ScriptAction Script="document.getElementById('chk1').parentNode.style.backgroundColor = '#FFFFFF';" />
</Condition>
</OnClick>
</Animations>
</cc1:AnimationExtender>