1

問題が存在する作業サイトを確認したい場合は、[資格情報]セクションを参照してください（青いカラーブロック「#star」の下のコンテンツをアニメーション化しています）。

http://176.32.230.17/apptivation.co.uk/m/home/

私は2つのプラグインを持っています

  1. ：画面上で、ターゲットのDIVがビューポートに表示されているときにアニメーションを再生します
  2. 全画面ページをめくると、セクション間で本のような効果が得られます

プラグイン2は、プラグインが機能するために、1つのページに次のセクション構造があることを想定しています。

<div class="bb-item">
<div class="content">
    <div class="scroller">
                    <!-- this is the div i want to animate -->
        <div id="star" class="inner-pad">
            some content
        </div>
    </div>
</div>
</div>

私は次のように画面上のプラグインを初期化します：

$(function() {
 setInterval(function() {
    $("#star").filter(":onScreen").addClass('animated bounceInRight');
 }, 0)                             
})

上記のコードが最初のセクションである場合、私の'#star' divは、画面上（プラグイン1）が意図したとおりにクラス名を正常に追加します。ただし、そのコードを5番目のセクション（たとえば）に移動すると、そのセクションに到達する（目に見える）前に、画面上でクラス名が追加されます。これは、プラグイン2がプラグイン1に影響を与えていると思う場所であり、プラグイン1は、実際にはdivが表示されていないのに表示されていると見なします。

画面上のプラグインがその役割を果たし、特定のセクションにのみいる場合にのみクラス名を追加するようにするにはどうすればよいですか？

画面上のプラグインが初期化される前に、クラス名'animated bounceInRight'を削除しようとしましたが、機能しませんでした。（プラグイン2の）このスクリプトファイルでは、ページめくりが開始されると、いくつかの要素が破棄されて再初期化されますが、画面上でも同じことができますか？どうすればこれを行うことができますか？

4

1 に答える 1