Need some help with MOVE method in AJAX animation control

Hi ,

to use the MOVE animation, the element has to be ABSOLUTELY positioned.

Add the style attribute .. style="position:absolute" and then try moving the Panel.

Set the AnimationTarget to be "Panel1", otherwise the Button1 will move .

new Markup ..

<asp:PanelID="Panel1"runat="server"Height="50px"Width="125px" style="position:absolute">

<asp:LabelID="Label1"runat="server"Text="This is a test."></asp:Label>

</asp:Panel>

<ajaxToolkit:AnimationExtenderID="AnimationExtender1"runat="server"TargetControlID="Button1">

<Animations>

''<OnClick>

<MoveRelative="False"Horizontal="500"Duration=".5"Fps="20" AnimationTarget="Panel1"/>

</OnClick>

</Animations>

</ajaxToolkit:AnimationExtender>

Please mark my reply as the answer if This resolves it.

That worked! Thanks for the help.

I tried marking your reply as the answer, but I keep getting a javascript error.

Thanks,

Sean

lol ,

Try again later , probably some maintenance or network Traffic issue

Finally got it to mark your reply as the answer - not sure what the issue was.

I do have a follow up issue with regards to wiring the animation up to the button click event. When I do this, the behavior is very strange. The animation only lasts for a brief second, does not move more than 100 or so pixels to the right, and the movement is not smooth at all. When I change this to wire the animation up to the Panel click event, it works perfectly. Any idea why? Eventually, I want to hook this up to a timer or similar mechanism to create a slide show (any help you an give in that area would be apprecited as well).

Thanks again for your help.

Sean

<ajaxToolkit:AnimationExtenderID="AnimationExtender1"runat="server"TargetControlID="Button1">

<Animations>

<OnClick>

<movehorizontal="800"Fps="30"duration="3"animationtarget="Panel1"/>

</OnClick>

</Animations>

</ajaxToolkit:AnimationExtender>

"The animation only lasts for a brief second, does not move more than 100 or so pixels to the right, and the movement is not smooth at all."

Sounds weird , can you please share the markup for the same ?

"Eventually, I want to hook this up to a timer or similar mechanism to create a slide show "

For this , you can use the Sys.Timer control .

check out the documentation here -->http://ajax.asp.net/docs/overview/UsingTimerControlTutorial.aspx.

If there is a question the Docs leave unanswered , please let me know , I will try my best to answer

The markup is the same as my original post, with the exception of the position:absolute sytle attribute added per your suggestion. Once I added it, the panel moved, but in the strange manner I have described in my previous post. If I leave everythign else the same, and change the targetcontrolid in the animationextender line from this:

<ajaxToolkit:AnimationExtenderID="AnimationExtender1"runat="server"TargetControlID="Button1">

to this:

<ajaxToolkit:AnimationExtenderID="AnimationExtender1"runat="server"TargetControlID="Panel1"> the animation works great. If it gets hooked up to the button1 click event, it seems to behave as if the page is re-loading during the animation (or something similar) and the visual experience is very choppy.

I agree, the experience is very bad when the button1 is assigned to be the TargetControl .

And thats because the Button1 is rendered to be a Submit button and posts the page when clicked.

Try this , use the following button as the trigger for your animation

<

inputtype="button"runat="server"id="btnOne"value="start Animation"/>

<ajaxToolkit:AnimationExtenderID="AnimationExtender1"runat="server"TargetControlID="btnOne">

Hope this helps

Hi,

You could also addOnClientClick="return false;" to your button to prevent it from starting a postback when clicked.

Thanks,
Ted