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)

第一个bool将清除动画队列。第二个将“跳到动画结束”，从而防止动画卡在“中间”的某个地方。

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

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

更多信息here

快速单击链接时Jquery动画不起作用

1 个答案: