Set different timers in javascript to show divs-CodePudding

I have this code that makes me able to set a timer to show/hide divs, but i wouls 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 ><!----- 1 ------>
<div ><div >Anne faure (Brouteur)</div>
<div ><div><div></div><div>Coucou</div><div></div><div></div></div> 
</div>
<div >15 janv. 2022 à 08:29</div></div></div>

<div ><!----- 73 ------>
<div ><div >Sir Perceval</div>
<div ><div><div></div><div>Salut</div><div></div><div></div></div> 
</div>
<div >15 janv. 2022 à 08:56</div></div></div>

<div ><!----- 72 ------>
<div ><div >Anne faure (Brouteur)</div>
<div ><div><div></div><div>Comment tu vas</div><div></div><div></div> 
</div></div>
<div >17 janv. 2022 à 07:30</div></div></div>

<div ><!----- 71 ------>
<div ><div >Sir Perceval</div>
<div ><div><div></div><div>On se connaît?</div><div></div><div></div> 
</div></div>
<div >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 !

CodePudding user response：

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)

CodePudding user response：

Its simple All that you have to do is set different timeouts and change style as you like in the function passed as argument to this setTimeout (reference)

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>
    <div id="div1">This is div 1</div>
    <div id="div2">This is div 2</div>
    <script src="./script.js"></script>
</body>
</html>

style.css

#div1{
    padding: 2rem;
    background-color: grey;
    font-weight: bold;
    margin: 1rem;
    transform: translateX(150%);
    transition: all 0.5s ease-in-out;
}

#div2{
    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');

setTimeout(()=>{div1.style.transform = 'translateX(0)'},1000)
setTimeout(()=>{div2.style.transform = 'translateX(0)'},2000)