0

3 つの要素 (テスト 1、テスト 2、テスト 3) を、これらの要素が Web ブラウザー/ビューポートに表示されるようになったら、1 つずつ表示しようとしています。インターネットで見つけた以下のコードを使用しています。Fadein は機能しますが、「ウェイポイント」に到達したときにユーザーが下にスクロールすることによってトリガーされるのではなく、ページが読み込まれるとすぐに開始されます。多分これは私が理解していないオフセットコードによるものでしょうか? この場合、それは何をしますか？どうもありがとう

<script type="text/javascript">
$(document).ready(function() {
$('.test1').waypoint(function(event, direction) {
    $(this).fadeIn(1500);
}, {
    offset: function() {
       return -$(this).height();
    }
});

$('.test2').waypoint(function(event, direction) {
    $(this).fadeIn(2000);
}, {
    offset: function() {
       return -$(this).height();
    }
});

$('.test3').waypoint(function(event, direction) {
    $(this).fadeIn(2500);
}, {
    offset: function() {
       return -$(this).height();
    }
});
});
</script>
4

1 に答える 1

1

の要素はdisplay:none、表示されているときと同じドキュメント上の場所に存在しません。これは一種のポイントですdisplay:none。ウェイポイントなどのこれらの要素の位置を読み取ろうとするスクリプトは、通常0、ページの上部に配置されているかのように返されるため、すぐに実行されます。

これに対処する最善の方法は、display:none+の使用をやめfadeIn、不透明度のアニメーションに切り替えることです。以下の例。

また、Waypoints バージョン 2.0 以降ではイベント パラメータが削除されたので、ここでも削除しました。オフセットも変更しました。-$(this).height()要素がビューポートの上部を完全に離れると、fadeIn がトリガーされます。

$('.test1, .test2, .test3').css('opacity', 0);

$('.test1').waypoint(function(direction) {
  $(this).animate({ opacity: 1 }, 1500);
}, {
  offset: 'bottom-in-view'
});

// etc
于 2013-09-13T21:35:07.050 に答える