Question

我之前已成功使用此代码进行fadeIn，animate，CSS转换和转换。

$(window).scroll( function(){

    $('.item1').each(function (i) {

        var bottom_of_object = $(this).offset().top + $(this).outerHeight();
        var bottom_of_window = $(window).scrollTop() + $(window).height();
        /* For testing only */
        console.log(bottom_of_object);
        console.log(bottom_of_window);

        /* If the object is visible in the window */
        if (bottom_of_window > bottom_of_object) {

             $(this).fadeIn(1000, 'swing', function () {
                $('.item2').fadeIn(1000, 'swing', function () {
                    $('.item3').fadeIn(1000, 'swing', function () {
                        $('.item4').fadeIn(1000, 'swing');
                    });
                });
            });
        }
    })
});

但是我无法使用此HTML正常工作。

<div class="container">
    <div class="row">
        <div class="col-md-3 col-xs-12 img-responsive item item1">
            <img src="images/gallery/Brows/brows13.png" />
        </div>
        <div class="col-md-3 col-xs-12 img-responsive item item2">
            <img src="images/gallery/Liner/liner2.png" />
        </div>
        <div class="col-md-3 col-xs-12 img-responsive item item3">
            <img src="images/gallery/Body Ink/BI004.png" />
        </div>
        <div class="col-md-3 col-xs-12 img-responsive item item4">
            <img src="images/gallery/Nails/nails1.png" />
        </div>
     </div>
  </div>

这次我无法弄清楚我做错了什么。

应该让它更清楚对不起，我急着在商店关门前出门。图像fadeIn，但它们在页面加载时执行，而不是在滚动时执行。

Answer 1

你们每个人只找到第一个div（item1）。假设您想要全部找到它们，请使用

CSS
<style>.item4 { display: none; }</style>

jQuery
var bottom_of_window = $(window).scrollTop() + $(window).height();
$(window).scroll( function(){

$('.item1').each(function (i) {

  var bottom_of_object = $(this).offset().top + $(this).outerHeight();
  /* For testing only */
  console.log(bottom_of_object);
  console.log(bottom_of_window);

  /* If the object is visible in the window */
  if (bottom_of_window > bottom_of_object) {

     $(this).fadeIn(1000, 'swing', function () {
       $('.item2').fadeIn(10000, 'swing', function () {
          $('.item3').fadeIn(10000, 'swing', function () {
              $('.item4').fadeIn(10000, 'swing');
          });
       });
     });
  }
})
});

Answer 2

你最后错过了两个DIVS。

当你遇到一些无法正常工作的问题时，请务必验证你的HTML。你可以通过这种方式拯救一大堆痛苦。

我有一种感觉，你只是忘记在这里包含最后两个div，并且它们出现在你自己的代码中。但是，我仍然会说要验证页面只是为了检查。

当我在这里时，在循环之外声明这个：

var bottom_of_window = $(window).scrollTop() + $(window).height();

您希望尽可能减少DOM调用，并且在循环期间不会发生这种变化。

jQuery基于滚动的fadeIn不等待滚动

2 个答案: