使用 jquery 航点连续显示隐藏项目

Question

我有一个元素列表，其中显示前 2 个元素，其他元素被 css 隐藏。

<div class="container">
    <ul>
      <!-- shown -->
      <li>content...1</li>
      <li>content...2</li>

      <!-- hidden -->
      <li>content...3</li>
      <li>content...4</li>
      <li>content...5</li>
      <li>content...6</li>
      <li>content...7</li>
    <ul>
  </div>

现在我想在底部滚动到 container div 时再显示 2 个元素，依此类推，直到显示所有项目。我已经有一个函数showMoreItems() 可以显示更多项目。我只需要每次都调用这个函数。我怎么能用航点做到这一点。我在看无限滚动，但那是用于 ajax 调用的。但我没有使用ajax。项目已经在 DOM 中，只是被隐藏了。但是感觉是一样的。

这是我在其他页面中使用的，用于在视图出现时触发功能。

$el.waypoint( function( direction ) {
            if( direction === 'down' ) {
                animateNumber($el, $el_span, theNumber);
            }
        }, { 
                offset: '85%',
                triggerOnce: true,
        });

Answer 1

我试图通过航点实现相同的功能，但后来我切换到 jquery inview 插件。 (https://github.com/protonet/jquery.inview)

它可能对你有点帮助..