0

これが例です。下にスクロールすると、ナビゲーションバーがアニメーション化されます。上にスクロールして戻ると、アニメーションで戻る必要があります。残念ながら、これは非常に遅いです。これは、スクロールするたびに座標をチェックして計算する必要があるという事実とおそらく関係があります。

言い換えれば、私はこのスニペットをより効率的にする方法を探しています：

$(window).scroll(function(){
    var supra = $("div#supra-top-wrap"),
        topWrap = supra.children("div#top-wrap"),
        subNav = supra.children("nav#sub-nav");

    if ($(window).scrollTop() > 0){
        topWrap.animate({"top":"-38px"}, 400);
        subNav.animate({"top":"-70px"}, 400);
    }
    else {
        topWrap.animate({"top":"0"}, 400, function() {
            subNav.animate({"top":"0"}, 400);
        });
    }
});

ああ、そしてここにあなたの道を開くためのフィドルがあります。

4

2 に答える 2

3

アニメーションがキューに入れられるという単純なケースだと思うので、前のアニメーションが完了した後、つまり約400ms後にのみ実行されます。次のようにstop（）を追加してみてください。

topWrap.stop().animate(...)
subNav.stop().animate(...)

これにより、実行中のアニメーションが停止し、すぐに新しいアニメーションが開始されます。

于 2012-11-12T09:27:52.930 に答える
0

私は他の何かを試しました-これはアニメーションがより速く反応するのを助けますが、それでも.stop（）@EvidentAgendaが述べたほど効果的ではありません。アニメーション文字列を比較して、同じかどうかを確認しました/そうでない場合は、アニメーションをトリガーします

var tt = {'top': 0}; // Animation string
$(window).scroll(function(){
  var scroll = $(window).scrollTop();
  if(scroll > h) { var tt2 = {'top': 0}; }
  else { var tt2 = {'top': FHh*-1}; }
  //FHh is global var that is Div's height
  if(tt2 != tt) {
    $('#fixedHeader').stop().animate(tt2, 150);
    // can use together with .stop() - which even more faster
    tt = tt2;
  }
});
于 2015-01-24T11:31:09.743 に答える