當快速點擊鏈接時Jquery動畫無法正常工作

Question

這裏是我的代碼， 這段代碼從頁面底部滾動div到頂部。 我有3個鏈接，每個滾動另一個div並隱藏它後面的div。 如果等到動畫結束，所有的作品都很好。 如果我不等，我很快點擊鏈接，它不起作用。 動畫卡住，有時它不顯示任何div。

可能是什麼問題？

的CSS：

.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);} 

的JavaScript：

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"); 
      } 
     }); 
    } 
}); 

}

Answer 1

嘗試通過一些布爾到停止方法：

變化

stop() 

到

stop(true, true) 

第一布爾將清除動畫隊列。第二部分將「動畫結束」，從而防止動畫卡在「中間」某處。

clearQueue指示是否也刪除排隊動畫的布爾值。默認爲false。

jumpToEnd布爾值，指示是否立即完成當前動畫。默認爲false。

更多信息here