加载更多特效

1.有些时候，首页加载更多的按钮不需要用到ajax，通过特效展现，每次点击展示两行内容。多余内容隐藏掉。

html结构

      <ul class="productsShow clearfix showMoreNChildren" pagesize="10">
        <li>
          <a href="#">
            <img src="../images/image_18.jpg" alt="">
            <p class="mui-ellipsis-2">Xiaomi Note 4X Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod temporibus ipsa, consectetur numquam esse illo facilis minima, veritatis perferendis consequuntur incidunt. Dolor reiciendis incidunt totam illum placeat laborum quo eius.
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque et totam nesciunt, hic dicta atque culpa necessitatibus dolor non natus animi rerum, sint officiis minus maiores repellendus accusantium cum perferendis.
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="../images/image_18.jpg" alt="">
            <p class="mui-ellipsis-2">Xiaomi Note 4X Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod temporibus ipsa, consectetur numquam esse illo facilis minima, veritatis perferendis consequuntur incidunt. Dolor reiciendis incidunt totam illum placeat laborum quo eius.
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque et totam nesciunt, hic dicta atque culpa necessitatibus dolor non natus animi rerum, sint officiis minus maiores repellendus accusantium cum perferendis.
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="../images/image_18.jpg" alt="">
            <p class="mui-ellipsis-2">Xiaomi Note 4X Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod temporibus ipsa, consectetur numquam esse illo facilis minima, veritatis perferendis consequuntur incidunt. Dolor reiciendis incidunt totam illum placeat laborum quo eius.
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque et totam nesciunt, hic dicta atque culpa necessitatibus dolor non natus animi rerum, sint officiis minus maiores repellendus accusantium cum perferendis.
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="../images/image_18.jpg" alt="">
            <p class="mui-ellipsis-2">Xiaomi Note 4X Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod temporibus ipsa, consectetur numquam esse illo facilis minima, veritatis perferendis consequuntur incidunt. Dolor reiciendis incidunt totam illum placeat laborum quo eius.
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque et totam nesciunt, hic dicta atque culpa necessitatibus dolor non natus animi rerum, sint officiis minus maiores repellendus accusantium cum perferendis.
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="../images/image_18.jpg" alt="">
            <p class="mui-ellipsis-2">Xiaomi Note 4X Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod temporibus ipsa, consectetur numquam esse illo facilis minima, veritatis perferendis consequuntur incidunt. Dolor reiciendis incidunt totam illum placeat laborum quo eius.
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque et totam nesciunt, hic dicta atque culpa necessitatibus dolor non natus animi rerum, sint officiis minus maiores repellendus accusantium cum perferendis.
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="../images/image_18.jpg" alt="">
            <p class="mui-ellipsis-2">Xiaomi Note 4X Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod temporibus ipsa, consectetur numquam esse illo facilis minima, veritatis perferendis consequuntur incidunt. Dolor reiciendis incidunt totam illum placeat laborum quo eius.
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque et totam nesciunt, hic dicta atque culpa necessitatibus dolor non natus animi rerum, sint officiis minus maiores repellendus accusantium cum perferendis.
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="../images/image_18.jpg" alt="">
            <p class="mui-ellipsis-2">Xiaomi Note 4X Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod temporibus ipsa, consectetur numquam esse illo facilis minima, veritatis perferendis consequuntur incidunt. Dolor reiciendis incidunt totam illum placeat laborum quo eius.
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque et totam nesciunt, hic dicta atque culpa necessitatibus dolor non natus animi rerum, sint officiis minus maiores repellendus accusantium cum perferendis.
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="../images/image_18.jpg" alt="">
            <p class="mui-ellipsis-2">Xiaomi Note 4X Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod temporibus ipsa, consectetur numquam esse illo facilis minima, veritatis perferendis consequuntur incidunt. Dolor reiciendis incidunt totam illum placeat laborum quo eius.
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque et totam nesciunt, hic dicta atque culpa necessitatibus dolor non natus animi rerum, sint officiis minus maiores repellendus accusantium cum perferendis.
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="../images/image_18.jpg" alt="">
            <p class="mui-ellipsis-2">Xiaomi Note 4X Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod temporibus ipsa, consectetur numquam esse illo facilis minima, veritatis perferendis consequuntur incidunt. Dolor reiciendis incidunt totam illum placeat laborum quo eius.
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque et totam nesciunt, hic dicta atque culpa necessitatibus dolor non natus animi rerum, sint officiis minus maiores repellendus accusantium cum perferendis.
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="../images/image_18.jpg" alt="">
            <p class="mui-ellipsis-2">Xiaomi Note 4X Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod temporibus ipsa, consectetur numquam esse illo facilis minima, veritatis perferendis consequuntur incidunt. Dolor reiciendis incidunt totam illum placeat laborum quo eius.
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque et totam nesciunt, hic dicta atque culpa necessitatibus dolor non natus animi rerum, sint officiis minus maiores repellendus accusantium cum perferendis.
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="../images/image_18.jpg" alt="">
            <p class="mui-ellipsis-2">Xiaomi Note 4X Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod temporibus ipsa, consectetur numquam esse illo facilis minima, veritatis perferendis consequuntur incidunt. Dolor reiciendis incidunt totam illum placeat laborum quo eius.
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque et totam nesciunt, hic dicta atque culpa necessitatibus dolor non natus animi rerum, sint officiis minus maiores repellendus accusantium cum perferendis.
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="../images/image_18.jpg" alt="">
            <p class="mui-ellipsis-2">Xiaomi Note 4X Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod temporibus ipsa, consectetur numquam esse illo facilis minima, veritatis perferendis consequuntur incidunt. Dolor reiciendis incidunt totam illum placeat laborum quo eius.
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque et totam nesciunt, hic dicta atque culpa necessitatibus dolor non natus animi rerum, sint officiis minus maiores repellendus accusantium cum perferendis.
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="../images/image_18.jpg" alt="">
            <p class="mui-ellipsis-2">Xiaomi Note 4X Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod temporibus ipsa, consectetur numquam esse illo facilis minima, veritatis perferendis consequuntur incidunt. Dolor reiciendis incidunt totam illum placeat laborum quo eius.
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque et totam nesciunt, hic dicta atque culpa necessitatibus dolor non natus animi rerum, sint officiis minus maiores repellendus accusantium cum perferendis.
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="../images/image_18.jpg" alt="">
            <p class="mui-ellipsis-2">Xiaomi Note 4X Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod temporibus ipsa, consectetur numquam esse illo facilis minima, veritatis perferendis consequuntur incidunt. Dolor reiciendis incidunt totam illum placeat laborum quo eius.
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque et totam nesciunt, hic dicta atque culpa necessitatibus dolor non natus animi rerum, sint officiis minus maiores repellendus accusantium cum perferendis.
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="../images/image_18.jpg" alt="">
            <p class="mui-ellipsis-2">Xiaomi Note 4X Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod temporibus ipsa, consectetur numquam esse illo facilis minima, veritatis perferendis consequuntur incidunt. Dolor reiciendis incidunt totam illum placeat laborum quo eius.
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque et totam nesciunt, hic dicta atque culpa necessitatibus dolor non natus animi rerum, sint officiis minus maiores repellendus accusantium cum perferendis.
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="../images/image_18.jpg" alt="">
            <p class="mui-ellipsis-2">Xiaomi Note 4X Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod temporibus ipsa, consectetur numquam esse illo facilis minima, veritatis perferendis consequuntur incidunt. Dolor reiciendis incidunt totam illum placeat laborum quo eius.
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque et totam nesciunt, hic dicta atque culpa necessitatibus dolor non natus animi rerum, sint officiis minus maiores repellendus accusantium cum perferendis.
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="../images/image_18.jpg" alt="">
            <p class="mui-ellipsis-2">Xiaomi Note 4X Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod temporibus ipsa, consectetur numquam esse illo facilis minima, veritatis perferendis consequuntur incidunt. Dolor reiciendis incidunt totam illum placeat laborum quo eius.
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque et totam nesciunt, hic dicta atque culpa necessitatibus dolor non natus animi rerum, sint officiis minus maiores repellendus accusantium cum perferendis.
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="../images/image_18.jpg" alt="">
            <p class="mui-ellipsis-2">Xiaomi Note 4X Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod temporibus ipsa, consectetur numquam esse illo facilis minima, veritatis perferendis consequuntur incidunt. Dolor reiciendis incidunt totam illum placeat laborum quo eius.
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque et totam nesciunt, hic dicta atque culpa necessitatibus dolor non natus animi rerum, sint officiis minus maiores repellendus accusantium cum perferendis.
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="../images/image_18.jpg" alt="">
            <p class="mui-ellipsis-2">Xiaomi Note 4X Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod temporibus ipsa, consectetur numquam esse illo facilis minima, veritatis perferendis consequuntur incidunt. Dolor reiciendis incidunt totam illum placeat laborum quo eius.
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque et totam nesciunt, hic dicta atque culpa necessitatibus dolor non natus animi rerum, sint officiis minus maiores repellendus accusantium cum perferendis.
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="../images/image_18.jpg" alt="">
            <p class="mui-ellipsis-2">Xiaomi Note 4X Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod temporibus ipsa, consectetur numquam esse illo facilis minima, veritatis perferendis consequuntur incidunt. Dolor reiciendis incidunt totam illum placeat laborum quo eius.
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque et totam nesciunt, hic dicta atque culpa necessitatibus dolor non natus animi rerum, sint officiis minus maiores repellendus accusantium cum perferendis.
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="../images/image_18.jpg" alt="">
            <p class="mui-ellipsis-2">Xiaomi Note 4X Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod temporibus ipsa, consectetur numquam esse illo facilis minima, veritatis perferendis consequuntur incidunt. Dolor reiciendis incidunt totam illum placeat laborum quo eius.
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque et totam nesciunt, hic dicta atque culpa necessitatibus dolor non natus animi rerum, sint officiis minus maiores repellendus accusantium cum perferendis.
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="../images/image_18.jpg" alt="">
            <p class="mui-ellipsis-2">Xiaomi Note 4X Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod temporibus ipsa, consectetur numquam esse illo facilis minima, veritatis perferendis consequuntur incidunt. Dolor reiciendis incidunt totam illum placeat laborum quo eius.
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque et totam nesciunt, hic dicta atque culpa necessitatibus dolor non natus animi rerum, sint officiis minus maiores repellendus accusantium cum perferendis.
            </p>
          </a>
        </li>
      </ul>

CSS样式忽略

JS代码

  // // 加载更多
// start
(function () {
  var showMoreNChildren = function ($children, n) {
    //显示某jquery元素下的前n个隐藏的子元素
    var $hiddenChildren = $children.filter(":hidden");
    var cnt = $hiddenChildren.length;
    for (var i = 0; i < n && i < cnt; i++) {
      $hiddenChildren.eq(i).show();
    }
    return cnt - n; //返回还剩余的隐藏子元素的数量
  }

  //对页中现有的class=showMorehandle的元素，在之后添加显示更多条，并绑定点击行为
  $(".showMoreNChildren").each(function () {
    var pagesize = $(this).attr("pagesize") || 10;
    var $children = $(this).children();
    if ($children.length > pagesize) {
      for (var i = pagesize; i < $children.length; i++) {
        $children.eq(i).hide();
      }

      $("<div class='loadMoreBox df-jcai-center'><div class='loadMore'><span class='loadMoreC'>Load More +</span></div></div>").insertAfter($(this)).click(function () {
        if (showMoreNChildren($children, pagesize) <= 0) {
          //如果目标元素已经没有隐藏的子元素了，就隐藏“点击更多的按钮条”
          $(this).hide();
        };
      });
    }
  });
})();
  // end