Digg-Like Button Animation, Easy Way?

Hi,

I've been trying to create a button with fading/morphing effect for a while now (kind of like digg buttons), but so far I'm not very happy with the results.

I almost got there, but not quite. Any help would be appreciated.

I have the buttons inside a Repeater control. So getting the button's client id is not the simplest thing. I also wanted to change the source image of the button (src attribute), this can't be done thru the StyleAction, so I used a Javascript/ScriptAction solution. The solution works greatly for hover effects, but not for client-side click events.

Here's the code (all client-side):

//first the fake button and animation to init everything, I know there are other ways, but this works fine.

<asp:Button EnableViewState="false" ID="FakeTarget" runat="server" Style="display: none" />
<cc1:AnimationExtender ID="aex" runat="server" TargetControlID="FakeTarget" /
//the repeater and the individual updatepanels:
<asp:Repeater ID="rpt" runat="server" OnItemCommand="rpt_ItemCommand" EnableViewState="False" OnItemDataBound="rpt_ItemDataBound">
<ItemTemplate>
<atlas:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:LinkButton id="btn" runat="server" OnMouseOver="attach(this)"/>
</ContentTemplate>
</atlas:UpdatePanel>
</ItemTemplate>
</asp:Repeater
//the javascript code
function attach(v)
{
if (v != null)
{
//scriptaction to execute (basically change the button's image)
var s = "var x = document.getElementById('" + v.id + "');if (x) x.src = 'img/new.gif';";
var effects = new Array();
effects[0] = new AjaxControlToolkit.Animation.FadeOutAnimation(v, .5, 30, .1, 1, false);
effects[1] = new AjaxControlToolkit.Animation.ScriptAction(v, .1, 20, s);
effects[2] = new AjaxControlToolkit.Animation.FadeInAnimation(v, .5, 30, .2, 1, false);

AjaxControlToolkit.Animation.SequenceAnimation.play(v, 0, 24, effects, 1);
return false;
}
}

this works perfectly, but substituting OnMouseOver for OnClientClick messes things up, as I think it's a timing issue with the updatepanel returning too quickly. The only fix I've found so far is force the Server-side Command Event to sleep for the animation time, but I hope there's a more elegant way of doing this.

Thanks,

Alexbump

Could you explain in more detail what the desired effect looks like?

Is there an example of what you want in the web?