Showing an element for 5 seconds, then hide and show next element

Question

This is what I've tried so far, but it just shows all the elements at once:

i1 = document.getElementById('img_1');
i2 = document.getElementById('img_2');
i3 = document.getElementById('img_3');
i4 = document.getElementById('img_4');
i5 = document.getElementById('img_5');

myarr = [i1,i2,i3,i4,i5];
    for (i=0; i<myarr.length;i++) {  
       $(myarr[i]).show().delay(5000).fadeOut();

    }

can you create a working snippet ? Are you using jQuery or vanilla JS ? — Amar Singh, May 03 '19 at 06:32
https://api.jquery.com/delay/ `.delay()` doesn't "delay javascript" - it delays the next animation in the queue, in this case the `.fadeOut()` — freedomn-m, May 03 '19 at 06:35
You can use `setTimeout` or `.delay` (before the `.show()`) - both described here: https://stackoverflow.com/a/19599326/2181514 — freedomn-m, May 03 '19 at 06:39
Possible duplicate of [Using jQuery delay() with separate elements](https://stackoverflow.com/questions/2363566/using-jquery-delay-with-separate-elements) — freedomn-m, May 03 '19 at 06:39
@YoYo "*using jQuery or vanilla JS*" looks like a nasty mix of the two :( — freedomn-m, May 03 '19 at 06:40
Possible duplicate of [setTimeout in for-loop does not print consecutive values](https://stackoverflow.com/questions/5226285/settimeout-in-for-loop-does-not-print-consecutive-values) — 4b0, May 03 '19 at 06:40

score 3 · Accepted Answer · answered May 03 '19 at 06:47

I assume you are trying to achieve an endless loop.

I think you should use interval in that case, and do fadeOut/fadeIn of elements.

i1 = document.getElementById('img_1');
i2 = document.getElementById('img_2');
i3 = document.getElementById('img_3');
i4 = document.getElementById('img_4');
i5 = document.getElementById('img_5');

let myarr = [i1, i2, i3, i4, i5];
let active = 1;

setInterval(() => {
  $(myarr[active - 1]).fadeOut(500)
  if (active >= myarr.length) {
    active = 0
  }
  setTimeout(() => {
    $(myarr[active]).fadeIn(500);
    active = active + 1;
  }, 500)
}, 5000)

What this does, is updates elements every 5 sec to next element, if it reached the end, it resets it to zero.

Checkout this fiddle

You can use `$("#img_1")` instead of `document.getElementById("img_1")`. It's less to type. — Agi Hammerthief, May 03 '19 at 06:50
Yes, I used some of his code for a quick example. It is up to him to fix it, tweak it, upgrade it — noitse, May 03 '19 at 07:07

score 1 · Answer 2 · answered May 03 '19 at 06:40

You can use async and await.

Another this you can improve is that. You can add same class to all images you want to show in series. If you want to select all by id you can use Attribute Selectors.

const myarr = document.querySelectorAll('img[id^=img]');

I have used same class rather than id

const arr = [...document.querySelectorAll('.test')];

(async function(){
    for (let i=0; i<arr.length;i++) {  
       await new Promise(res => {
          setTimeout(() => {
            $(arr[i]).show().fadeOut();
            res();
          },2000)
       }) 
    } 
})()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">Test 1</div>
<div class="test">Test 2</div>
<div class="test">Test 3</div>

score 1 · Answer 3 · answered May 03 '19 at 06:41

let count = 1;

setInterval(()=>{
document.querySelectorAll("*[id*='img_']").forEach((elem)=> elem.style.display="none");
document.getElementById(`img_${count}`).style.display="";
if(count<4) count++;
else count = 1;
},1000)

<div id="img_1">Image 1</div>
<div id="img_2" style="display:none">Image 2</div>
<div id="img_3" style="display:none">Image 3</div>
<div id="img_4" style="display:none">Image 4</div>

Vanilla Javascript solution!

Radonirina Maminiaina · Answer 4 · 2019-05-03T06:47:01.040

You forgot to show your element after fadeOut. Here you can achieve it:

// show first element
$('img').eq(0).show();
$('img').each(function () {
  // your delay
  $('img').delay(5000).fadeOut();
  // make sure next element is image
  if ($(this).next()[0].tagName === 'IMG') {
      // show next element
      $(this).next().fadeIn();
  }
});

img {
  display: none;
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://picsum.photos/id/5/50" />
<img src="https://picsum.photos/id/10/50" />
<img src="https://picsum.photos/id/30/50" />
<img src="https://picsum.photos/id/0/50" />
<img src="https://picsum.photos/id/150/50" />
<img src="https://picsum.photos/id/1000/50" />

score 0 · Answer 5 · answered May 03 '19 at 07:00

var basicVal =0;
$(document).ready(function(){
   $('.wrapper img').eq( basicVal ).show();
   var setTime =setInterval(function(){
     if( basicVal < $('.wrapper img').length -  1){
       $('.wrapper img').eq(basicVal ).hide(); 
       basicVal++;
       $('.wrapper img').eq(basicVal).show();
     }else{
       clearTimeout(setTime);
     }    
     console.log();
     
   }, 5000);
});

.wrapper{
  width: 100%;
  float: left;
}
.wrapper img{
  width: 50%;
  height: 300px; 
  object-fit:  cover;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper"> 
<img src="https://images.pexels.com/photos/34950/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
<img src="http://www.desktopwallpaperhd.net/wallpapers/0/4/landscapes-wallpaper-fengguangbizhi-fengjingbizhi-picture-image-1316.jpg" alt="">
<img src="http://trustbanksuriname.com/wp-content/uploads/2019/04/pony-picture-guide-to-native-pony-breeds-little-pony-cartoon-pictures.jpg" alt="">
<img src="https://www.bigfoto.com/stones-background.jpg" alt="">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQulscf1nNOpaI1tElZgKTTSAl_ZcL_i1VwLDojgKzqjSTMofsqPw" alt="">
  
  </div>

check this out I use some little bit of jquery and setInterval function to change in every 5000ms

Nuhman · Answer 6 · 2019-05-03T10:31:59.530

You may use setTimeout for achieving this effect.

<div id="container">
    <div class="block" id="img_1"></div>
    <div class="block" id="img_2"></div>
    <div class="block" id="img_3"></div>
    <div class="block" id="img_4"></div>
    <div class="block" id="img_5"></div>
</div>


.block{
    width:100px;
    height:100px;
    display: inline-block; 
    margin:10px;
    background: lightblue;  
    visibility: hidden;
}

And then,

$('.block').each(function(index, value) {  
    setTimeout(function() {
       $(value).css("visibility", "visible");
             $(value).show().delay(1000).fadeOut();
    }, 2000 * (index + 1));
});

Showing an element for 5 seconds, then hide and show next element

6 Answers6