0

ユーザーがスクロールしたときに、ページのさまざまなセクションに段階的にスクロールするページをアニメーション化したいと思います。だから私はこのコードを書いた：

var $window = $(window);    
var sectionHeight = $window.height();
var animating = false;
var dir;
// initialize page position (0)
var pagePos = $(window).scrollTop();

$(window).scroll(function() {
    // current page position    
    var st = $(this).scrollTop();

    // whether to animate up or down        
    dir = ((st > pagePos) ? '+=' : '-=');

    // animate 
    if (animating == false) {
        animating = true;
        $('html, body').stop().animate({scrollTop: dir+sectionHeight},500, function() {

            pagePos = $(window).scrollTop();    
            animating = false;
        }); 
    }
});

問題は、最初のアニメーションを下にした後、ページを一番上にアニメーション化する連鎖アニメーションを取得することです。'animating'がfalseに設定されていない限り、アニメーション化されるべきではないため、理由はわかりません。アニメーションが完了すると、falseに戻されるだけです...そうですか？

4

2 に答える 2

0

私はそれを機能させることができました、それがコード化されたのでなぜそれが機能しないのかまだわかりません、しかしここに私のために働いた解決策があります-私は@sachleenの答えに触発されました。sachleenに感謝します。

スクロールアニメーションを別の関数に移動し、アニメーション関数へのコールバックで、アニメーションと同じ期間のsetTimeoutを使用して、「アニメーション化」ブール値をfalseに戻すだけの別の関数を呼び出しました。

于 2012-06-20T21:29:27.540 に答える
0

誰かがより良い解決策を思い付くことができると確信していますが、1つの潜在的な修正は、スクロール後に一定期間無効にすることです.

関連コード:

var ct = new Date().getTime();

if (animating == false && new Date().getTime() > ct + 10)

これにより、少なくとも 11ms が経過した場合にのみアニメーションが発生します。2 という低い値でも機能するようです。スクロールの遅延は特に感じられませんが、これは理想的な解決策とは言えません。

デモ

于 2012-06-20T17:34:22.493 に答える