running atlas,ajax: hovers

2012年3月28日水曜日

Re-Setting an Object to its original position using Animation Extender

I have been working on a nice ajax menu using the Animation Extender. Basically, i have a series of GIF's. When the mouse hovers over a gif, the gif moves 6px to the right. When the mouse hovers out, the gif moves 6px to the left.

Everything works well, if you let the whole animation run through. But if you where to move your mouse off and on the gif a few times in a short period, the gif would actually lose its original position and end up either further left or further right to where it should.

I spose what I am trying to get at is, is it possible to reset an objects original position?

Here is a sample of my extender:

<cc1:AnimationExtender ID="AnimationExtender3" runat="server" TargetControlID="btnPro">
<Animations>
<OnHoverOver>
<Move duration=".03" fps="50" horizontal="6" unit="px"/>
</OnHoverOver>
<OnHoverOut>
<Move duration=".03" fps="50" horizontal="-6" unit="px"/>
</OnHoverOut>
</Animations>
</cc1:AnimationExtender>

Thanks for your help in advance.

Hugh

Would any one have an easier way of doing this?

Thanks

Hugh

HI ,

try this link :

Scripting Animations from the Ms Ajax AnimationExtender

Hope this heps

Thanks for the link.

This would be perfect for wat i am trying to do. Problem is i cant seem to get it to work on a hover over event, instead of a click event.

Any ideas?

Thanks

Hugh

Resizing a panel using Animation Extender

Hi Everyone,

I have 3 rows of images on my form and each row has 3 images as well. I want to have a effect so that when the user hovers on a row than that row expands itself and the rest of the rows remain the same size.

To do this I used 3 panels and in each panel I inseted a table so as to accomodate the 3 images.

Then to add the Hover effect I used the Animation extender control. The code that I used is given below.

<cc1:AnimationExtenderID="AnimationExtender1"runat="server"TargetControlID="Panel1">

<ParallelDuration=".1"fps="50">

<ResizeWidth="250"Height="260" />

</Parallel>

</OnHoverOver>

</Animations>

</cc1:AnimationExtender>

However this doesn't seem to work. Any idea about why this is happening. It seems to me that I am making a really basic mistake but I have been trying to make this work for quite some days with no success.

If anyone has any idea what the problem is here please let me know.

Thanks

Hi,

I created a sample that works fine according to your description, please try it:

<%@. Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"></script><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <table> <tr> <td> <asp:Image ID="Image1" runat="server" ImageUrl="~/Images/Add.gif" Height="50" Width="50"/> <ajaxtoolkit:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="Image1"> <Animations> <OnHoverOver> <Parallel Duration=".1" fps="50"> <Resize Width="250" Height="250" /> </Parallel> </OnHoverOver> <OnHoverOut> <Parallel Duration=".1" fps="50"> <Resize Width="50" Height="50" /> </Parallel> </OnHoverOut> </Animations> </ajaxtoolkit:AnimationExtender> </td> <td> <asp:Image ID="Image2" runat="server" ImageUrl="~/Images/edit.gif" Height="50" Width="50"/> <ajaxtoolkit:AnimationExtender ID="AnimationExtender2" runat="server" TargetControlID="Image2"> <Animations> <OnHoverOver> <Parallel Duration=".1" fps="50"> <Resize Width="250" Height="250" /> </Parallel> </OnHoverOver> <OnHoverOut> <Parallel Duration=".1" fps="50"> <Resize Width="50" Height="50" /> </Parallel> </OnHoverOut> </Animations> </ajaxtoolkit:AnimationExtender> </td> <td> <asp:Image ID="Image3" runat="server" ImageUrl="~/Images/delete.gif" Height="50" Width="50"/> <ajaxtoolkit:AnimationExtender ID="AnimationExtender3" runat="server" TargetControlID="Image3"> <Animations> <OnHoverOver> <Parallel Duration=".1" fps="50"> <Resize Width="250" Height="250" /> </Parallel> </OnHoverOver> <OnHoverOut> <Parallel Duration=".1" fps="50"> <Resize Width="50" Height="50" /> </Parallel> </OnHoverOut> </Animations> </ajaxtoolkit:AnimationExtender> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </table> </div> </form></body></html>

Thanks Raymond that surely helps....

However I have another problem and it will be great if you can have a look at that also....

http://forums.asp.net/p/1168745/1950736.aspx#1950736

Thanks in advance

vishy

2012年3月28日水曜日

Re-Setting an Object to its original position using Animation Extender

Resizing a panel using Animation Extender

running atlas,ajax

Blog Archive

About Me