How to hide elements one by one then show them one by one using jquery?

Question

Trying to hide one div at a time (5 seconds intervals between each) and when the third one gets hidden the first one shows right away. And like that infinitely.

I tried this but it's not working well. Hides them successfully but doesn't show them.

setTimeout(function() {
  $('#span3').hide();
}, 5000);

setTimeout(function() {
  $('#span2').hide();
}, 10000);

setTimeout(function() {
  $('#span1').hide();
}, 15000);

setTimeout(function() {
  $('#span3').show();
}, 15000);

setTimeout(function() {
  $('#span2').show();
}, 20000);

setTimeout(function() {
  $('#span1').show();
}, 25000);

.appear-span div span {
  display: block;
  background-color: black;
  padding: 5px 0;
  color: white;
  width: 200px;
  text-align: center;
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="appear-span">
  <div id="span3">
    <span>Selling food.</span>
  </div>
  <div id="span2">
    <span>Selling drink.</span>
  </div>
  <div id="span1">
    <span>Selling kidneys.</span>
  </div>
</div>

Where do I add the timings if I want them to hide 5 seconds one after the other?

$("#span3").hide(function(){
  $("#span2").hide(function(){
    $("#span1").hide(function(){
    });
  });
});

One thing to note is I don't have idea what I'm doing. I haven't went into JS/jQuery ever, this was just found on internet and used some kind of crazy logic to expand to all divs/spans. — Aiden P, Sep 19 '16 at 12:54
@Tushar I know what you're aiming at but I don't know how that works in JS. — Aiden P, Sep 19 '16 at 12:55
http://stackoverflow.com/questions/379900/fade-in-each-element-one-after-another — Suresh Kamrushi, Sep 19 '16 at 12:56
@Tushar - the 3 divs are overlapping each other now. Do you want it that way or three divs placed next to each other hiding & appearing — Nikhil Nanjappa, Sep 19 '16 at 12:58

Mohammad · Answer 1 · 2016-09-19T14:45:13.753

Check if last div is visible, hide divs one by one and if last div is hidden, show divs one by one.

setInterval(function() {
    if ($(".appear-span > div:last").is(":visible"))
        $(".appear-span > div:visible").first().hide();   
    else
        $(".appear-span > div:not(:visible)").first().show();   
}, 5000);

setInterval(function() {
    if ($(".appear-span > div:last").is(":visible"))
        $(".appear-span > div:visible").first().hide();   
    else
        $(".appear-span > div:not(:visible)").first().show();   
}, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="appear-span">
  <div id="span3">
    <span>Selling food.</span>
  </div>
  <div id="span2">
    <span>Selling drink.</span>
  </div>
  <div id="span1">
    <span>Selling kidneys.</span>
  </div>
</div>

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

You can try something like this.

Logic

Hide all divs and show div that is to be shown.
You can use .eq to find element at necessary position

var counter = -1;
function updateUIState(){
  $('[id^="span"]').hide().eq(++counter % 3).show()
  initTimeout();
}

function initTimeout(){
  setTimeout(updateUIState, 1000)
}

initTimeout();

.appear-span div span {
    display: block;
    background-color: black;
    padding: 5px 0;
    color: white;
    width: 200px;
    text-align: center;
    position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="appear-span">
  <div id="span3">
    <span>Selling food.</span>
  </div>
  <div id="span2">
    <span>Selling drink.</span>
  </div>
  <div id="span1">
    <span>Selling kidneys.</span>
  </div>
</div>

MacWise · Accepted Answer · 2016-09-19T14:47:55.167

Just nest the calls and then recall the same function, use jquery delay.

$(function() {
var delayInterval = 5000;
function hideAndPeek() {
    $('#span3').delay(delayInterval).hide(function() {
        $('#span2').delay(delayInterval).hide(function() {
            $('#span1').delay(delayInterval).hide(function() {
                $('#span3').delay(delayInterval).show(function() {
                    $('#span2').delay(delayInterval).show(function() {
                        $('#span1').delay(delayInterval).show(function() {
                            hideAndPeek();
                        });
                    });
                });
            });
        });
    });
}
setTimeout(hideAndPeek(), delayInterval);
});

  p {
    font-size: 150%;
    cursor: pointer;
  }

<body>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   <div class="appear-span">
    <div id="span3">
      <span>Selling food.</span>
   </div>
  <div id="span2">
    <span>Selling drink.</span>
  </div>
  <div id="span1">
    <span>Selling kidneys.</span>
  </div>
 </div>
</body>

Sorry, realized you were using #ids instead of .class selectors, updated the code. You could probably refactor this and abstract the element out into a variable to reduce the lines of code. — MacWise, Sep 19 '16 at 13:54

How to hide elements one by one then show them one by one using jquery?

3 Answers3

Logic