0

私はこれに慣れていませんが、jQuery Waypoint を使用しており、スクロールしてビューに要素を「フェードイン」させようとしています。私が抱えている問題は、最初の要素がスクロールされて表示されると、すべての要素がフェードインすることです。つまり、スクロール時に最初の要素の fadeIn のみが表示されます。残りはビューポートの外にフェードインします。

ビューポートにスクロールしたときに各要素をフェードインする方法がわかりません。すべての要素が一度にフェードインするのではなく...

これが私のコードです：

      $(window).scroll(function () {
          $("#top-section").waypoint(function(){
            $(this).fadeIn(750); },{ offset: '10px' });
          $("#upper-section").waypoint(function(){
            $(this).fadeIn(750); },{ offset: '10px' });
          $("#home-main").waypoint(function(){
            $(this).fadeIn(750); },{ offset: '10px' });
          $("#home-sidebar-wrapper").waypoint(function(){
            $(this).fadeIn(750); },{ offset: '10px' });
          $("#lower-section").waypoint(function(){
            $(this).fadeIn(750); },{ offset: '10px' });
          $("#bottom-section").waypoint(function(){
            $(this).fadeIn(750); },{ offset: '10px' });
          $("#static-section").waypoint(function(){
            $(this).fadeIn(750); },{ offset: '10px' });
          $("#footer-section-1").waypoint(function(){
            $(this).fadeIn(750); },{ offset: '10px' });
          $("#footer-section-2").waypoint(function(){
            $(this).fadeIn(750); },{ offset: '10px' });
          $("#footer-section-3").waypoint(function(){
            $(this).fadeIn(750); },{ offset: '10px' });
          $("#footer-section-4").waypoint(function(){
            $(this).fadeIn(750); },{ offset: '10px' });
          $("#footer-section-5").waypoint(function(){
            $(this).fadeIn(750); },{ offset: '10px' });
      });

EDIT : リクエストにより、デバッグを支援するための代替 jsFiddle を次に示します: http://jsfiddle.net/tUW8k/

4

2 に答える 2

3

display none の要素は、ドキュメントのどこにも存在しません。彼らは、ページの座標 0,0 に住んでいると報告しています。display none 要素をウェイポイントとして使用しないでください。代わりに、不透明度を 0 から 1 にアニメーション化します。

于 2013-10-02T17:52:35.440 に答える
0

フィドルを動かして、いくつかのcssも表示してください。.waypoint() 関数は、スクロールして選択範囲が表示されるようになったときにのみ実行する必要があります。css が display:none; で始まっていることは確かです。それらの要素のために？

于 2013-09-30T14:48:35.743 に答える