Search code examples
javascripthtmltimer

Set different timers in javascript to show divs

I have this code that makes me able to set a timer to show/hide divs, but i would like to adapt it to be able to set different timers, I mean some divs for 2000ms then others for 1500ms. But i don't know how to do as i never code in JS, I tried to adapt idangerous but i cannot make it work either.

EDIT: I FOUND A WAY BY ADDING "IF" STATEMENT IN THE JS! But still I have like 100 divs, it's a little bit "bad coded" to do it like this in my opinion.

So here is the js:

<script>
$(document).ready(function() {
    var images = $('.images')
    current = 0;
    images.hide();
    Rotator();
    function Rotator() {
        if (current == 1 || current == 3){
            $(images[current]).fadeIn('slow').delay(2500).fadeOut('slow');
        }
        else{
        $(images[current]).fadeIn('slow').delay(10).fadeOut('slow');
        }
       $(images[current]).queue(function() {
           current = current < images.length - 1 ? current + 1 : 0;
           Rotator();
           $(this).dequeue();
       });
    }
});
</script>

and in the HTML :

<div id="imagescollection">

<div class="images"><!----- 1 ------>
<div class="pam _3-95 _2ph- _2lej uiBoxWhite noborder"><div class="_3-95 _2pim _2lek 
_2lel">Anne faure (Brouteur)</div>
<div class="_3-95 _2let"><div><div></div><div>Coucou</div><div></div><div></div></div> 
</div>
<div class="_3-94 _2lem">15 janv. 2022 à 08:29</div></div></div>

<div class="images"><!----- 73 ------>
<div class="pam _3-95 _2ph- _2lej uiBoxWhite noborder"><div class="_3-95 _2pim _2lek 
_2lel">Sir Perceval</div>
<div class="_3-95 _2let"><div><div></div><div>Salut</div><div></div><div></div></div> 
</div>
<div class="_3-94 _2lem">15 janv. 2022 à 08:56</div></div></div>

<div class="images"><!----- 72 ------>
<div class="pam _3-95 _2ph- _2lej uiBoxWhite noborder"><div class="_3-95 _2pim _2lek 
_2lel">Anne faure (Brouteur)</div>
<div class="_3-95 _2let"><div><div></div><div>Comment tu vas</div><div></div><div></div> 
</div></div>
<div class="_3-94 _2lem">17 janv. 2022 à 07:30</div></div></div>

<div class="images"><!----- 71 ------>
<div class="pam _3-95 _2ph- _2lej uiBoxWhite noborder"><div class="_3-95 _2pim _2lek 
_2lel">Sir Perceval</div>
<div class="_3-95 _2let"><div><div></div><div>On se connaît?</div><div></div><div></div> 
</div></div>
<div class="_3-94 _2lem">17 janv. 2022 à 11:09</div></div></div>


</div>

Is there a way to adapt this code to be able to set different times for my divs? Thank you in advance!

Solution

  • If you want to render more divs you can try out this way

    index.html

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <script src="./script.js"></script>
</body>
</html>

    style.css

    .reveal{
    padding: 2rem;
    background-color: pink;
    margin: 1rem;
    transform: translateX(150%);
    transition: all 0.5s ease-in-out;
}

body{
    overflow-x: hidden;
}

    script.js

    var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');

for(var i=0; i<100; i++){
    var div = document.createElement('div');
    div.classList.add('reveal')
    div.innerText = `This is div ${i}`; // here u can use other array which contains the contents
    document.body.appendChild(div);
}

var reveals = document.getElementsByClassName('reveal');
for(var i=0; i<reveals.length; i++){
    ((div)=>{
        setTimeout(()=>{
            div.style.transform = 'translate(0)';
        }, 1000*(i+1));
    })(reveals[i]);
}
console.log(reveals)