1

画面上の要素の可視性をチェックするコードがあります。ページをスクロールして表示されるとすぐに、カスタム イベントがトリガーされます。このカスタム イベントは、アニメーションを開始します。このアニメーションが何度も開始されるのを防ぐために、開始する関数は一度だけ開始されます。そのために、jQuery 関数 .one() を使用しました。

要素が表示されているかどうかを確認する関数:

checkScrollPos = function() {
    if (objTopPos - scrollPos <= windowHeight / 2) {
        $(document).trigger('objVisible');
    }
}

イベントをリッスンする関数:

evtListener = function() {
    //startAnimation() should only be started once
    $(document).one(
        {
            'objVisible': function(event) {
                startAnimation();
            }
        }
    );
}

ここですべてが起こります：

$(document).ready(function() {
    evtListener();
    $(window).scroll(function () {
        scrollPos = $(document).scrollTop();
        checkScrollPos();
    }
}

これですべて正常に動作しますが、checkScrollPos() 関数を拡張して、要素が再び見えなくなるかどうかも確認し、アニメーションを停止しました。それはうまくいきます。問題は、イベントがトリガーされると、イベントにバインドされた関数が 1 回だけ実行されることです。そのため、要素を表示してスクロールし、次に表示から外してから再度表示すると、アニメーションは再度実行されません (もちろん正しい動作です)。ここで、イベントが1回だけトリガーされるようにしたいと思いますが、要素が見えたり見えなくなったりするたびに、一度だけではありません。したがって、基本的には、何らかのリセットが必要です

$(document).one()

関数 – 要素が見えなくなるたびに、.one() 関数を再度使用できるようにします。それを行う方法はありますか？

4

1 に答える 1

0

objVisible要素が消えるたびにイベントをバインドする必要があります。

イベントが再びバインドされるevtListener()ように、要素が見えなくなった後に呼び出すだけです。objVisible

コードは次のようになります。

checkScrollPos = function() {
    if (objTopPos - scrollPos <= windowHeight / 2) {
        $(document).trigger('objVisible');
    }

    if (/* your condition to check if element is out of sight */) {
        evtListener();
    }
}
于 2013-01-31T15:56:26.070 に答える