1

これが私のコードです。このコードは、ページの下部から上部にdivをスクロールします。それぞれが別のdivをスクロールし、その背後にあるdivを非表示にする3つのリンクがあります。アニメーションが終了するまで待つと、すべてうまくいきます。待たずにリンクをクリックすると機能しません。アニメーションが動かなくなり、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");
            }
        });
    }
});

}

4

1 に答える 1

2

いくつかのブール値を stop メソッドに渡してみてください:

変化する

stop()

に

stop(true, true)

最初の bool はアニメーション キューをクリアします。2 番目は、アニメーションの「最後にジャンプ」し、アニメーションが「途中」で動かなくなるのを防ぎます。

clearQueueキューに入れられたアニメーションも削除するかどうかを示すブール値。デフォルトは false です。

jumpToEnd現在のアニメーションをすぐに完了するかどうかを示すブール値。デフォルトは false です。

詳細はこちら

于 2012-12-05T16:53:44.663 に答える