Jquery animation not working when clicking quickly on links

[duan3]

Here is my code,this code scrolls a div from the bottom of the page to the top.I have 3 links that each one scrolls another div and hides the div behind it. if if wait till the animation finishes, all works great.If i don't wait and i quickly click the links it doesn't work.the animation get stuck and sometimes it doesn't show any div.what can be the problem?The CSS:\[code\].footerDiv{display:none;position:absolute;z-index:900;top:800px;left:0px;background-size:100%;height: 600px;width:100%;margin: 0;padding: 0;background-repeat:no-repeat;background-position:bottom;} #fourth{background-image:url(../images/group_bg.jpg);} #fifth{background-image:url(../images/team_bg.jpg);} #sixth{background-image:url(../images/client_bg.jpg);}\[/code\]the javascript:\[code\]function showFooterLink(num){var bottomOfScroll = $(window).scrollTop() + $(window).height();$("#footerLinks a").each(function(index, element) { var elemNum = $(element).attr("data-num"); if(elemNum==num){ $(element).addClass("on"); } else{ $(element).removeClass("on"); }});$('.footer_'+num).stop(). css({ "display":"block", "z-index":1000 }). animate({ top: bottomOfScroll - $(window).height() }, { duration: 1500, specialEasing: { top: 'easeInOutQuad' }, complete: function() { $("body").css("overflow", "hidden"); $(".footerDiv").each(function(index, element) { if(!$(element).hasClass("footer_"+num)){ $(element).hide(); $(element).css({ "top" : bottomOfScroll, "z-index" : 900 }); } else{ $(element).css("z-index","900"); } }); }});\[/code\]}