Saturday, March 24, 2012

How do I call the animation when hovering over an asp.net menu?

I have a quite simple problem I guess.

My master page has a menu on it, and I want to call my animation fade sequence when hovering over the menu, and call the unfade seqence when the mouse is removed from the menu.

I would have no problem to have the update panel on either my normal pages, or on the master page, as I want to fade everything within the update panel.

Any hints or suggestions are very much appreciated. I would like to name my fade sequence FadePage and call it when hovering. I just can't figure out how to do this, or fade it in any other way.

Thanks

/Jonas

Hi Jonas,

I think I might have misunderstood the problem , but I feel this link will be helpful :

http://blogs.gotdotnet.com/phaniraj/archive/2007/04/13/animations-how-many-ways-do-i-call-thee.aspx

Hope this helps


So if I do like this:

<formid="form1"runat="server">

<scriptlanguage="javascript"type="text/javascript">

function DoTheAnimation()

{//Play the Animation by calling its static methods

AjaxControlToolkit.Animation.ResizeAnimation.play( $get("queryReply") , 0.2 , 45 , 200 , 100 ,"px" );

}

</script>

<asp:scriptmanagerID="Scriptmanager1"runat="server"></asp:scriptmanager>

<asp:MenuID="MainMenu"runat="server".....................>

<ajaxToolkit:AnimationExtenderID="animateReplyPanes"runat="server"TargetControlID="MainPage"BehaviorID="animateReplyPanesBehavior">

<Animations>

<OnClick>

<ResizeHeight="100"FPS="25"Width="200"duration="0.3"unit="px"/>

</OnClick>

</Animations>

</ajaxToolkit:AnimationExtender>

How can I then call the DoTheAnimation function when user hovers over the menu?

Also: what should I write instead ofqueryReply?

Thanks /Jonas


This is probably a much simler and better explanation of what I want to do:

<body>

<formid="form1"runat="server">

<asp:scriptmanagerID="Scriptmanager1"runat="server"></asp:scriptmanager>

<asp:MenuID="MainMenu"runat="server" ........ ..........................></asp:Menu>

<divclass="MainPage" id="MainPage"runat="server">

<asp:contentplaceholderid="ContentPlaceHolder1"runat="server">

</asp:contentplaceholder>

</div>

<ajaxToolkit:AnimationExtenderID="animateReplyPanes"runat="server"TargetControlID="MainMenu"BehaviorID="animateReplyPanesBehavior">

<Animations>

<OnHoverOver>

<FadeOut/>

</OnHoverOver>

<OnHoverOut>

<FadeIn/>

</OnHoverOut>

</Animations>

</ajaxToolkit:AnimationExtender>

So If I have this code, but I want the animation to play on my "MainPage" div instead of the "MainMenu", how can I do that?

Thanks!

No comments:

Post a Comment