单击时淡入元素中的元素，并隐藏更多按钮，如果空了

Question

我每次点击按钮时尝试再显示2个divs。当显示所有DIV时，按钮应消失。但是按钮不会消失。

$(".button").click(function() {
  $(".content").nextAll(':lt(2)').fadeIn("slow");
});

.hide { display: none; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="content">Content 1</div>
    <div class="content">Content 2</div>
    <div class="content hide">Content 3</div>
    <div class="content hide">Content 4</div>
    <div class="content hide">Content 5</div>
    <div class="content hide">Content 6</div>
    <div class="content hide">Content 7</div>
    <div class="content hide">Content 8</div>
    <div class="content hide">Content 9</div>
    <div class="content hide">Content 10</div>
    <div class="button">SHOW ME 2 MORE</div>

在这里我的小提琴：https：//jsfiddle.net/9z67k8cd/

Answer 1

更改您的JS：

$(".button").click(function() {
  $(".content:visible:last").nextAll('.content:lt(2)').fadeIn("slow");
  if ($(".content:visible").length === $(".content").length) {
    $(this).hide();
  }
  
});

.hide { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="content">Content 1</div>
    <div class="content">Content 2</div>
    <div class="content hide">Content 3</div>
    <div class="content hide">Content 4</div>
    <div class="content hide">Content 5</div>
    <div class="content hide">Content 6</div>
    <div class="content hide">Content 7</div>
    <div class="content hide">Content 8</div>
    <div class="content hide">Content 9</div>
    <div class="content hide">Content 10</div>
    <div class="button">SHOW ME 2 MORE</div>