jquery - Using JavaScript, how to make elements appear one by one

How to make blocks appear one by one when I click a button? One click = one block appearing.

<div class="gallery">
    <div class="block">
        <div class="img"></div>
    </div>
    <div class="block">
        <div class="img"></div>
    </div>
    <div class="block">
        <div class="img"></div>
    </div>
    <div class="block">
        <div class="img"></div>
    </div>
</div>
<button id="btn"></button>

How to make blocks appear one by one when I click a button? One click = one block appearing.

<div class="gallery">
    <div class="block">
        <div class="img"></div>
    </div>
    <div class="block">
        <div class="img"></div>
    </div>
    <div class="block">
        <div class="img"></div>
    </div>
    <div class="block">
        <div class="img"></div>
    </div>
</div>
<button id="btn"></button>

Share Improve this question edited Jun 18, 2016 at 14:57 user94559 60.2k6 gold badges107 silver badges107 bronze badges asked Jun 18, 2016 at 14:53 dmitriy 4886 silver badges26 bronze badges

Add a ment |

4 Answers 4

Sorted by: Reset to default 5

Below is a working example using jQuery (as mentioned in your tags). A couple things to note:

I made a CSS class called hidden and added to each block.
With jQuery, I created a click handler for he button that finds the first block with the hidden class and removes that class. This has the result of displaying that block.

Here is the plete code:

<!doctype html>
<html>
<head>
    <style>
        .hidden { display: none; }
    </style>
    <script src="https://ajax.googleapis./ajax/libs/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
    <div class="gallery">
        <div class="block hidden">
            <div class="img"></div>
            first block
        </div>
        <div class="block hidden">
            <div class="img"></div>
            second block
        </div>
        <div class="block hidden">
            <div class="img"></div>
            third block
        </div>
        <div class="block hidden">
            <div class="img"></div>
            fourth block
        </div>
    </div>
    <button id="btn">Click me</button>

    <script>
        $(function () {
            $('#btn').click(function () {
                $('.gallery .hidden').first().removeClass('hidden');
            });
        });
    </script>
</body>
</html>

using only js

var count = 0;
function i(){
	items = document.getElementsByClassName("block");
    if(count < items.length)
       	items[count++].style.display = "block";
}

.block{
    display: none;
}

<div class="gallery">
     <div class="block">
           <div class="img">1</div>
     </div>
     <div class="block">
           <div class="img">2</div>
     </div>
     <div class="block">
     <div class="img">3</div>
           </div>
     <div class="block">
     <div class="img">4</div>
     </div>
</div>
<button id="btn" onclick="i()">appear one by one</button>

You could just show the first one not visible. For a little improvement, instead of looking up the visibility for each function call, we cache the list of hidden blocks ($blocks) at dom load.

At the end of the function the list of visible blocks is then updated (the one that was toggled on is displayed).

Note: this does not for dynamically added blocks that are added after the initial dom load, but the code could be easily updated for that.

$blocks = $('.block:not(:visible)');

function showBlock() {
  var $block = $blocks.first().css('display', 'block');
  $blocks = $blocks.not( $block );
}

.block {
  display: none;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="gallery">
  <div class="block">
    <div class="img"></div>
    one
  </div>
  <div class="block">
    <div class="img"></div>
    two
  </div>
  <div class="block">
    <div class="img"></div>
    three
  </div>
  <div class="block">
    <div class="img"></div>
    four
  </div>
</div>
<button id="btn" onclick="showBlock()">Show Block</button>

First set all blocks invisible with css:

.block { display: none; }

Then, add a handler to the button and make the first non-visible visible:

$("#btn").on("click", function () {
   $(".gallery").find(".block:hidden").first().css({ display: "block"; });
});

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

jquery - Using JavaScript, how to make elements appear one by one - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)