Load 3 boxes at a time by clicking the button

Question

Load 3 boxes at a time by clicking the button

Navigation

#1 by (2 votes)

1

$(".box-hidden").slice(0, 3).show();

$("#loadMore").on('click', function (e) {

    e.preventDefault();

    $( ".box-hidden:hidden" ).first().fadeIn( "slow", function showNext() {
        $( this ).next( ".thumb-hidden:hidden" ).fadeIn( "slow", showNext );

    });

    if ($(".box-hidden:hidden").length == 0) {
        $("#load").fadeOut('slow');
    }

});

.wrap {
        margin: 100px;
        overflow: hidden;
        width: 600px;
        margin: auto;
    }

    .wrap .box {
        padding: 50px;
        background: #548614;
        float: left;
        margin: 10px;
        color: white;
    }

    .wrap .box-hidden {
        display: none;
    }

    .wrap-button {
        margin: auto;
        width: 120px;
        overflow: hidden;
         clear: both;
    }

    .wrap-button .btn-load {
        padding: 9px;
        display: block;
        color: #fff;
        background: #323232;
       
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><divclass="wrap">
        <div class="box box-hidden">
            <p>
                Content 1
            </p>
        </div>



        <div class="box box-hidden">
            <p>
                Content 2
            </p>
        </div>



        <div class="box box-hidden">
            <p>
                Content 3
            </p>
        </div>



        <div class="box box-hidden">
            <p>
                Content 4
            </p>
        </div>



        <div class="box box-hidden">
            <p>
                Content 5
            </p>
        </div>



        <div class="box box-hidden">
            <p>
                Content 6
            </p>
        </div>



        <div class="box box-hidden">
            <p>
                Content 7
            </p>
        </div>



        <div class="box box-hidden">
            <p>
                Content 8
            </p>
        </div>



        <div class="box box-hidden">
            <p>
                Content 9
            </p>
        </div>



        <div class="box box-hidden">
            <p>
                Content 1
            </p>
        </div>



        <div class="box box-hidden">
            <p>
                Content 2
            </p>
        </div>



        <div class="box box-hidden">
            <p>
                Content 3
            </p>
        </div>


        <div class="wrap-button">

            <a href="#" id="loadMore" class="btn-load">Carregar mais</a>

        </div>

html jquery css

asked by anonymous 15.11.2018 / 17:21

1 answer

How to only bring records that have no association in the second table? Cache problem with ajax (text files) [duplicate]

score 2 · Answer 1

You can do this by using the eq() method always setting 0 , since every time the .box-hidden class is searched for in Html, ) element:

$(".box-hidden").slice(0, 3).show();

$("#loadMore").on('click', function() {

  $(".box-hidden:hidden").eq(0).fadeIn("slow");
  $(".box-hidden:hidden").eq(0).fadeIn(1500);
  $(".box-hidden:hidden").eq(0).fadeIn(2500);
  
  var boxes = $(".box-hidden:hidden").length;
  
  if(boxes == 0) {
    $("#loadMore").hide();
  }

});

.wrap {
  margin: 100px;
  overflow: hidden;
  width: 600px;
  margin: auto;
}

.wrap .box {
  padding: 50px;
  background: #548614;
  float: left;
  margin: 10px;
  color: white;
}

.wrap .box-hidden {
  display: none;
}

.wrap-button {
  margin: auto;
  width: 120px;
  overflow: hidden;
  clear: both;
}

.wrap-button .btn-load {
  padding: 9px;
  display: block;
  color: #fff;
  background: #323232;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><divclass="wrap">
  <div class="box box-hidden">
    <p>Content 1</p>
  </div>

  <div class="box box-hidden">
    <p>Content 2</p>
  </div>

  <div class="box box-hidden">
    <p>Content 3</p>
  </div>

  <div class="box box-hidden">
    <p>Content 4</p>
  </div>

  <div class="box box-hidden">
    <p>Content 5</p>
  </div>

  <div class="box box-hidden">
    <p>Content 6</p>
  </div>

  <div class="box box-hidden">
    <p>Content 7</p>
  </div>

  <div class="box box-hidden">
    <p>Content 8</p>
  </div>

  <div class="box box-hidden">
    <p>Content 9</p>
  </div>

  <div class="box box-hidden">
    <p>Content 1</p>
  </div>

  <div class="box box-hidden">
    <p>Content 2</p>
  </div>

  <div class="box box-hidden">
    <p>Content 3</p>
  </div>

  <div class="wrap-button">
    <a href="#" id="loadMore" class="btn-load">Carregar mais</a>
  </div>

</div>