0

この jQuery を作成して、ページがスクロールされたときに要素をアニメーション化する css クラスを追加しましたが、要素がビューポート内にあるときにページを更新すると、アニメーションはまったくスクロールせずにトリガーされます。

これは実際にどのように機能させたいのですが、このように機能する方法がわかりません。ページがスクロールされるまで .scroll バインドがトリガーされるべきではありませんか?

これを理解する必要がある理由は、要素が見えている状態でページの更新時にアニメーションを再生すると、アニメーションの最初の部分が切り取られているように見えるからです。私のデモのように、「なぜ見出しを追加しないのですか...」というスライダーのすぐ下の見出し領域には、.1 不透明度から 1 へのアニメーションのフェードインがありますが、要素がページの上部に近いため、アニメーションページが読み込まれるとすぐに追加され、ほとんど表示されないほど高速に行われます。

http://bbmthemes.com/themes/smart/

<script type="text/javascript">
// element animation
(function ($, document, undefined) {

    $(window).scroll(function() {
    var animation1 = $('.animation1').offset().top;
    var animation2 = $('.animation2').offset().top;
        var winTop = $(window).scrollTop();
        var winHeight = $(window).height()-175;
        var winWidth = $(window).width();

        if(winWidth <= 750){
        $('.animated').addClass("opacity1");
        }

        if(winTop >= (animation1-winHeight)){
        $('.animation1').addClass("animate-fade");
        }
        if(winTop >= (animation2-winHeight)){
        $('.animation2').addClass("animate-fade");
        }
    });
})(jQuery, document);
</script>
4

1 に答える 1

0

申し訳ありませんが、正確にはわかりませんが、alert('scrolling');デバッグするイベント ハンドラーの先頭に追加してみてください。

これにより、イベントが最初に発生するとすぐにページの読み込みが一時停止され、ページがスクロールされていると判断されたときの手がかりが得られます。これにより、何が原因であるかが明らかになる場合があります。

しかし、はい、ページの読み込み時に .scroll がトリガーされないと考えるのは正しいです。

于 2013-08-07T01:25:46.077 に答える