TabContainer Animation on tab change

The AJAX animation extender when applied on Tabcontainer on "onclick" event produces some good results, but the problem arises when you click anywhere on the tab and the animation is fired which you dont want to happen. You just want the animation to fire at tab change.

Solution = Found some good code for it , tweaked it as per the requirements. Here is it -

<%--

<cc1:TabContainer ID="TabContainer1" runat="server" EnableViewState ="true" OnClientActiveTabChanged = "ActiveTabChanged" >

   <cc1:TabPanel ID = "panel1" HeaderText = "panel1" runat ="server" Enabled ="true" >
       <ContentTemplate>
             --Your Content
       </ContentTemplate>
    </cc1:TabPanel>

   <cc1:TabPanel ID = "panel2" HeaderText = "panel2" runat ="server">
       <ContentTemplate>
            --Your Content
       </ContentTemplate>
    </cc1:TabPanel>

    <cc1:TabPanel ID = "panel3" HeaderText = "panel3" runat ="server" Width = "500px" >
       <ContentTemplate>
            --Your Content
       </ContentTemplate>
    </cc1:TabPanel>

</cc1:TabContainer>

<script type="text/javascript">

function ActiveTabChanged(sender, e)
{
       var Tab = $get('<%=TabContainer1.ClientID%>'); }
       AnimateTab(Tab );
}
var HighlightAnimations = {};

function AnimateTab(el)
{
     if (HighlightAnimations[el.uniqueID] == null)
       {
          HighlightAnimations[el.uniqueID] = AjaxControlToolkit.Animation.createAnimation({
          AnimationName : "FadeOut",
          duration : 0.5,
          AnimationName : "FadeIn",
          duration : 0.5
}, el);
}

HighlightAnimations[el.uniqueID].stop();
HighlightAnimations[el.uniqueID].play();
}
</script>

--%>