jQuery animation glitch

jQuery animation glitch

Hello,

I'm developing a portfolio for a client with animations using jQuery. The website is  http://go4impact.com/site/index2.html

The problem I'm having is that when you click on Client Samples >> Print, Graphics, Websites, Case Studies it starts an animation of sorts. If you click on the same tab again before the animation starts, it calls for the animation to be started again, which leaves the previous animation kind of glitchy and leaves a sort of "residue". How do I fix this? I've tried using .stop() and .clearQueue() with the animate callback but it stops the animation and doesn't start it again.

A sample of the animation code for Case Studies:

  1. function falling_boxes(){

    for(a=0; a<8; a++){

    setTimeout('$("#s'+(a*3)+'").animate({ marginTop: "'+(112-a*16)+'px"}, 500 )',a*600);

    setTimeout('$("#s'+(a*3+1)+'").animate({ marginTop: "'+(112-a*16)+'px"}, 500 )',a*600+200);

    setTimeout('$("#s'+(a*3+2)+'").animate({ marginTop: "'+(112-a*16)+'px"}, 500 )',a*600+400);

    }

    setTimeout('$(".ssquare").fadeOut("slow")',5500);

    setTimeout('$(".ssquare").css("margin-top","-500px")',5500);

    setTimeout('$(".square2link").fadeIn("slow")',5900);

    }


Any ideas? You'll have to see the animations in the portfolio to get a clearer picture.

Thanks in advance