Resumé

ASP.NET AJAX Toolkit Animation Framework

Cristian Merighi () 3.50

ASP.NET AJAX (formerly Atlas) Control Toolkit released in its September 2006 form. If you're an early adopter you'd better check the new Animation package, embedded in it.
This article is obsolete. Some functionalities might not work anymore. Comments are disabled.

A few hours ago the latest Atlas, ...whoops... I meant ASP.NET AJAX package has been released (the codename Atlas is demodé actually)! New ASP.NET AJAX Control Toolkit (September 2006) is out!

The Toolkit presents an interesting new feature: the gotta-be-loved Animation framework! You can realize nice interpolation effects on top of it.

Try to believe:

code:

    
<atlas:AnimationExtender runat="server" ID="AnimationExtender1">
    <atlas:AnimationProperties TargetControlID="img">
        <Animations>
            <OnLoad>
                <FadeOut Duration=".5" MinimumOpacity=".2" MaximumOpacity="1" />
            </OnLoad>
            <OnHoverOut>
                <Sequence>
                  <Pulse Duration=".1" Iterations="1"/>
                  <FadeOut Duration=".5" MinimumOpacity=".2" MaximumOpacity="1" />
                </Sequence>
            </OnHoverOut>
            <OnHoverOver>
                <FadeIn Duration=".5" MinimumOpacity=".2" MaximumOpacity="1" />
            </OnHoverOver>
        </Animations>
    </atlas:AnimationProperties>
</atlas:AnimationExtender>

<asp:Image runat="server" ID="img" ImageUrl="~/Images/Pacem.jpg" 
    BorderWidth="0px" />
    
warning! ASP.NET AJAX Beta 1 Toolkit Version (29th October 2006).
    
<ajax:AnimationExtender runat="server" ID="AnimationExtender1" 
TargetControlID="img">
    <Animations>
        <OnLoad>
            <FadeOut Duration=".5" MinimumOpacity=".2" MaximumOpacity="1" />
        </OnLoad>
        <OnHoverOut>
            <Sequence>
              <Pulse Duration=".1" Iterations="1"/>
              <FadeOut Duration=".5" MinimumOpacity=".2" MaximumOpacity="1" />
            </Sequence>
        </OnHoverOut>
        <OnHoverOver>
            <FadeIn Duration=".5" MinimumOpacity=".2" MaximumOpacity="1" />
        </OnHoverOver>
    </Animations>
</ajax:AnimationExtender>

<asp:Image runat="server" ID="img" ImageUrl="~/Images/Pacem.jpg" 
    BorderWidth="0px" />
    

Take care. Bye.

Feedbacks

  • Re: ASP.NET AJAX Toolkit Animation Framework

    senthil Thursday, October 26, 2006 3.00

    hi ur is good but tell me breifly about how to use onmouseover its an urgent needed

  • Re: ASP.NET AJAX Toolkit Animation Framework

    CMerighi Thursday, October 26, 2006 0.00

    The OnHoverOver and OnMouseOver events are pretty similar, except that the OnHoverOver event prevents the OnHoverOut animation to play (and viceversa). You can take a look to <a href="http://ajax.asp.net/ajaxtoolkit/Animation/Animation.aspx" target="_blank">this link</a> for the details. Bottom line is that you can replace OnHoverOver/Out with OnMouseOver/Out in the sample above and it will work as well. Hope it helped.

  • Re: ASP.NET AJAX Toolkit Animation Framework

    BJ Thursday, August 13, 2009 0.00

    can u please tell me how to create Photogallery for website using ajax asp.net

  • Re: ASP.NET AJAX Toolkit Animation Framework

    Mike Jones Thursday, August 20, 2009 4.00

    Animation with AJAX is very nice. MMLV.

feedback
 

Syndicate

Author

Cristian Merighi facebook twitter google+ youtube

Latest articles

Top rated

Archive

Where am I?

Author

Cristian Merighi facebook twitter google+ youtube

I'm now reading

Feeds