How would i put a timer between each of my icons being faded out?

JavaScript
1

Js code:

function closeHorizontalWindow()
{
    const reasons = ['Ready', 'NotReady', 'Break', 'Email', 'Lunch', 'Break', 'Meeting']


    for (let i = 0; i < reasons.length; i++) {
    document.getElementById(reasons[i]).style.animation = 'reasonsfadeout 0.45s ease 0s forwards'
    
}

css code:

@keyframes reasonsfadeout
{
  from{opacity: 1; }
  to {opacity: 0; }
}

the icons are currently being faded out at the same time, however what i would like to do is put a delay between each icon within the for loop. How can i do this?

2

Maybe something like this:

A delay is added to the animation rule in the loop.

3

Hey Paul thank you so much for your response! Unfortunately for some reasons im unable to get the animation working.

Javascript code:

var delay = 0;
function closeHorizontalWindow()
{
   
    const reasons = ['Ready', 'NotReady', 'Break', 'Email', 'Lunch', 'Break', 'Meeting', 'Chat']


    for (let i = 0; i < reasons.length; i++) {
        document.getElementById(reasons[i]).style.animation = "reasonsfadeout 1s ease " + delay + "s forwards";
        delay++;

    }

    setTimeout(closeReasonStateLayout, 700); // once the icons have faded this function will be triggered
}

CSS code:

@keyframes reasonsfadeout
{
  from{opacity: 1; }
  to {opacity: 0; }
}

HTML code:

<div id="notready-reasons">  
    <div style="display: grid; grid-template-columns: repeat(8,1fr); margin-left:-20px;  width:100px; text-align: center; color:#FFFFFF; height:60px;">
      <div id="Ready" class="overlay-state" onclick="closeHorizontalWindow()" ><img  height="100%" width="100%">
      <div id="NotReady" class="overlay-state" onclick="" ><img  height="100%" width="100%">
      <div id="Break" class="overlay-state" onclick=""><img height="100%" width="100%">
      <div id="Email" class="overlay-state" onclick=""><img height="100%" width="100%">
      <div id="Lunch" class="overlay-state" onclick=""><img height="100%" width="100%">
      <div id="Break" class="overlay-state" onclick=""><img height="100%" width="100%">
      <div id="Meeting" class="overlay-state" onclick=""><height="100%" width="100%">
    </div>
  </div>

This is my current code, i want to activate the fade animation when any of the icons above have been clicked. I’ve attempted to add the delay variable but nothing seems to happen. Do you know why this might be?

The icons do fade out if i remove the delay variable but when this is included, nothing occurs.

4

Move the delay variable inside the Function and then change your id for break as you have two ids the same which isn’t allowed.

Remember to update the array with the same changes.

1 Like
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.