Click here to check my latest exciting videos on youtube
Search Mallstuffs

Flag Counter
Spirituality, Knowledge and Entertainment


Locations of visitors to this page


Latest Articles


Move to top
Animation Effects using Ajax AnimationExtender Control
Posted By Sarin on Jan 29, 2013     RSS Feeds     Latest Hinduism news
7202 Views

AJAX AnimationExtender is an excellent Ajax control to add animation effects on your website. Resizing controls, Moving controls, changing background color, fade in-fadeout control, hide-unhide controls etc. This control has a number of triggers and events that let you add dynamic effects on your website.

  Properties of AJAX AnimationExtender Control
TargetControlID: ID of the control on which you want to add animation effects
OnMouseOver: Animation effects to be played when the mouse is moved over the target control.
OnMouseOut: Animation effects to be played when the mouse moves out of the target control.
OnHoverOver: Similar to OnMouseOver, Animation effects to be played when the mouse is moved over the target control. Difference is it will stop the animation effects of OnHoverOut event, if any, before playing its animation effects.
OnHoverOut: Similar to OnMouseOut, Animation effects to be played when the mouse is moved out of the target control. Difference is it will stop the animation effects of OnHoverOver event, if any, before playing its animation effects.
OnLoad: Fired as soon as the target control is loaded.
OnClick: Fired when the target control is clicked.

  Methods of AJAX AnimationExtender Control
DisposeAnimation () - Stops the current running animation effects
Dispose () - Dispose the behavior along with its animation effects
Play () - Start the animation if not started. If already started, this method will have no effect
Stop () - Stop the animation if not stopped. If already stopped, this method will have no effect
Quit () - Stop all the animation effects. Unlike the stop method which completes the final state of the animation, this method will stop the running animation effect immediately without completing its final state.  

Sample Example
To explain the various method and properties of AnimationExtender control, I have used the below code. In this chunk of code, I have used two AnimationExtender control First AnimationExtender control has animation effects for three events: Load, Click and MouseOver. Second animation control shows the animation effect for OnHoverOut and OnHoverOver event.  
On loading of Panel1, runs a sequence of animation effects: First the color of my target control Panel1 changes from Orange to Blue, next the opacity of imgAjax control is set to 0.5
On Clicking Panel1, runs a sequence of animation effects: Disable txtDisable textbox, Resize panel1, fadeout in 2 seconds at the rate of 20 frames per second.
Before click OnMouseOver will fire and the following animation effects will take place: Hide Label, Show Ajax loader image, Fadein imgAjax and at the same time increase image size by 400%
Similarly the second AnimationExtender Control is self explanatory. Script action is used to execute JavaScript code.
<ajaxToolkit:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="Panel1">
  <Animations>  
    <OnLoad>  
      <Sequence>  
        <Color Duration="3" StartValue="#FF3300" EndValue="#0033FF" Property="style" 
         PropertyKey="color" />  
           <OpacityAction AnimationTarget="imgAjax" Opacity="0.5" />  
       </Sequence>
     </OnLoad>  
   </Animations>
   <Animations>  
    <OnClick>  
     <Sequence>  
        <EnableAction AnimationTarget="txtDisable" Enabled="false" Duration="2" />
        <Resize Width="200" Height="150" />  
        <FadeOut Duration="2" Fps="20" />
     </Sequence>  
    </OnClick>  
  </Animations>
  <Animations>  
   <OnMouseOver>  
    <Sequence>  
     <StyleAction  AnimationTarget="lblHide" Attribute="display" Value="None" />
     <StyleAction  AnimationTarget="imgAjax" Attribute="display" Value="Block" />
     <Parallel AnimationTarget="imgAjax" Duration="1">
       <FadeIn Duration="2" Fps="20" />
       <Scale Duration="1" Fps="20" ScaleFactor="4.0" Center="true" />
     </Parallel>
    </Sequence>  
   </OnMouseOver>  
  </Animations>
</ajaxToolkit:AnimationExtender>
<ajaxToolkit:AnimationExtender ID="AnimationExtender2" runat="server" TargetControlID="imgKrishna">
  <Animations>  
    <OnHoverOut>
      <Sequence>
    <FadeOut Duration=".5" MinimumOpacity=".2" MaximumOpacity="1" />
  <ScriptAction Script="alert('out');" />  
  <Scale Duration="1" Fps="20" ScaleFactor="2.0" Center="true" />
       </Sequence>  
     </OnHoverOut>
    <OnHoverOver>
     <Sequence>
      <FadeIn Duration=".5" MinimumOpacity=".2" MaximumOpacity="1" />
      <ScriptAction Script="alert('in');" />  
      <Scale Duration="1" Fps="20" ScaleFactor="0.5" Center="true" />
     </Sequence>
    </OnHoverOver>
   </Animations>
  </ajaxToolkit:AnimationExtender>
  <asp:Panel ID="Panel1" runat="server" Height="50px" Width="125px" BackColor="AliceBlue"
        BorderStyle="Groove">
    This is animation control
  </asp:Panel>
    <asp:TextBox Text="this textbox can be disabled on clicking above" Width="300"  ID="txtDisable" runat="server" /><br />
    <asp:Label Text="Hovering above will hide this label" Width="300" ID="lblHide" runat="server" /><br />
    <img src="ajax-loader.gif" runat="server" id="imgAjax" style="display: none" /><br />
    Hover below to fadeout or fadein image<br /><br />
    <img src="krishna.jpg" runat="server" id="imgKrishna" />

First Image below is the screenshot when the screen is loaded. Check the change in color on load of panel 1



Second Image below is the animation when I hover over panel 1 and click panel 1





Third Image below is the screenshot for second animation extender for which the event is trigger when I hover in and out of the image of Lord Krishna.  





Attached is the sample code.
  
Conclusion:
In this article, we saw how to use Ajax animation control extender to animate various user interactions with the ASP.Net controls of your website.
Note: Images used on this website are either a production of Bhaktivedanta Book Trust(https://www.krishna.com), Iskcon Foundation or were found in google search under "Free to use and share". If any of the images presented here violates copyright issues or infringes anyone copyright or are not under "Fair use", then please bring it to our notice. Read Disclaimer for more.

Share this to your friends. One of your friend is waiting for your share.
Related Articles
Manipulating Elements and Animations Using Jquery
Advanced JQuery Fading Effects
Jquery features, Advantages and disadvantages
Tips and tricks with Ajax Collapsible panel
Animation Effects using Ajax AnimationExtender Control
Tips and tricks with ajax calendar
Working with forms-Jquery form selector
Show Update Progress Animation-Ajax

Post Comment