快速单击链接时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()

到

stop(true, true)

第一个布尔值将清除动画队列。第二个将“跳到动画的末尾”，从而防止动画卡在“中间”的某个地方。

clearQueue 一个布尔值，指示是否也删除排队的动画。默认为 false。

jumpToEnd 一个布尔值，指示是否立即完成当前动画。默认为 false。

更多信息here