Question

我在网页上有三个div，我想在它们处于可见状态时调用show()（jQuery UI）。这是有效的，但由于某种原因，他们似乎全部淡入，即使只有第一个可见。我想要的是他们每个人都要单独检查，并单独调用show()。这是我的代码：

$('.right-caption').each(function() {
  $(this).hide();
});
function isInView(elem){
   return $(elem).offset().top - $(window).scrollTop() < $(elem).height();
}
$(window).scroll(function() {
    $('.right-caption').each(function() {
        if (isInView($(this))) {
            $(this).show("drop", { direction: "right" }, 1200);
        }
    });
});

我是否错误地使用了each（）函数？或者我应该使用其他东西？我正在使用的唯一其他javascript是一个bootstrap插件。

Answer 1

建议这样的事情：

VirtualizedList

工作笔分叉：https://codepen.io/anon/pen/GmpZVL

<强>更新

使用$(function() { //hide them in the first place $('div').each(function() { $(this).hide(); }); function isInView(elem) { return $(elem).offset().top - $(window).scrollTop() < $(elem).height(); } //when the user scrolls, check, and if any of the divs are in sight, then show that div $(window).scroll(function() { $(".left-caption").each(function(i, el) { if (isInView($(el))) { setTimeout(function() { $(el).show("drop", { direction: "left" }, 1000); }, 400 + i * 400); } }); }); });和正确的类，您也可以这样做。

<强> HTML

.animate()

<强> CSS

<div class="left-caption off-screen">These Divs Should</div>
<div class="left-caption off-screen">Fadein/show</div>
<div class="left-caption off-screen">individually</div>

<强> JS

.off-screen {
  margin-left: -316px;
}

Answer 2

我改变了你的脚本。根本问题是你无法获得隐藏元素的偏移（请检查jQuery API）。我也去除了减少对滚动处理程序的调用。现在它大约每60毫秒执行一次。

$(function() {
  var $divs = $('div'),
    $window = $(window),
    $windowHeight = $(window).height(),
    divsOfsets = [];

  var debounce = function (func, threshold, execAsap) {
        var timeout;

        return function debounced() {
            var obj = this,
                args = arguments;

            function delayed() {
                if (!execAsap)
                    func.apply(obj, args);
                timeout = null;
            }

            if (timeout)
                clearTimeout(timeout);
            else if (execAsap)
                func.apply(obj, args);

            timeout = setTimeout(delayed, threshold || 100);
        };
    };
  var handleScroll = function () {
    var scrlt = $window.scrollTop(),
      len = divsOfsets.length;
    while (len--) {
      if ((scrlt + $windowHeight) > divsOfsets[len]) {
        $divs.eq(len).show(1200);
      }
    }
  };

  $divs.each(function() {
    divsOfsets.push($(this).offset().top);
  });
  $divs.hide();
  $window.scroll(debounce(handleScroll, 60));
});

每个（）和show（）的jQuery问题

2 个答案: