I am using some very simple javascript along with the AnimationExtender to fade a div change it's contents (just an image) and fade it back in, nothing is done server side.
I have this in the page to give me access to the animation code:
<cc1:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="mainProductImage"></cc1:AnimationExtender>
Here is my client side script:
<script language="javascript" type="text/javascript">
<!--
var imageAnimation = AjaxControlToolkit.Animation.FadeInAnimation;
function GetImage(ImageID) {
$get("ctl00_ContentPlaceHolder1_ProductControl1_mainProductImage").innerHTML = "<img src='/products/" + ImageID + "___Selected.jpg' />";
imageAnimation.play($get('ctl00_ContentPlaceHolder1_ProductControl1_mainProductImage'),.6);
}
//-->
</script>
I call it by simple passing in the ImageID of the next image I want. Works great except for if someone does some fast clicking, so I want to not execute this javascript if the previous call is still running.
Iwas think i could check the property of the animation isPlaying and not call another one if it's true, problem is I don't know how to accomplish this.
Anyone got any ideas?