How to make 3 functions work simultaneously when the button is clicked? And pressing will be only one, but not for each function. That is, when you click on the button, the first function should fire, and all the following ones after it should also be activated with the start of the timeout. Example:

function ex1() { document.getElementById('firstArrow').style.display='inline'; } setTimeout(ex1,2000); function ex2() { document.getElementById('secondArrow').style.display='inline'; } setTimeout(ex2,4000); function ex3() { document.getElementById('thirdArrow').style.display='inline'; } setTimeout(ex3,6000); 
 .checkmark-circle { position: relative; display: inline-block; vertical-align: top; } .checkmark-circle .background { width: 70px; height: 70px; border-radius: 50%; background: #2196f3; position: relative; } .checkmark-circle .checkmark { border-radius: 5px; } .checkmark-circle .checkmark.draw:after { -webkit-animation-delay: 100ms; -moz-animation-delay: 100ms; animation-delay: 100ms; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease; -moz-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-name: checkmark; -moz-animation-name: checkmark; animation-name: checkmark; -webkit-transform: scaleX(-1) rotate(135deg); -moz-transform: scaleX(-1) rotate(135deg); -ms-transform: scaleX(-1) rotate(135deg); -o-transform: scaleX(-1) rotate(135deg); transform: scaleX(-1) rotate(135deg); -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; animation-fill-mode: forwards; } .checkmark-circle .checkmark:after { opacity: 1; height: 25px; width: 27.5px; -webkit-transform-origin: left top; -moz-transform-origin: left top; -ms-transform-origin: left top; -o-transform-origin: left top; transform-origin: left top; border-right: 10px solid white; border-top: 10px solid white; border-radius: 2.5px !important; content: ''; left: 3px; top: 26px; position: absolute; } @-webkit-keyframes checkmark { 0% { height: 0; width: 0; opacity: 1; } 20% { height: 0; width: 37.5px; opacity: 1; } 40% { height: 75px; width: 37.5px; opacity: 1; } 100% { height: 75px; width: 37.5px; opacity: 1; } } @-moz-keyframes checkmark { 0% { height: 0; width: 0; opacity: 1; } 20% { height: 0; width: 37.5px; opacity: 1; } 40% { height: 75px; width: 37.5px; opacity: 1; } 100% { height: 75px; width: 37.5px; opacity: 1; } } @keyframes checkmark { 0% { height: 0; width: 0; opacity: 1; } 20% { height: 0; width: 37.5px; opacity: 1; } 40% { height: 25px; width: 25.5px; opacity: 1; } 100% { height: 40px; width: 30px; opacity: 1; } } .w3-button {width:160px;} 
 <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script> <p><button class="w3-button w3-deep-orange">Deep Orange</button></p> <div class="checkmark-circle" id="firstArrow" style="display:none"> <div class="background"></div> <div class="checkmark draw"></div> </div> <br> <div class="checkmark-circle" id="secondArrow" style="display:none"> <div class="background"></div> <div class="checkmark draw"></div> </div> <br> <div class="checkmark-circle" id="thirdArrow" style="display:none"> <div class="background"></div> <div class="checkmark draw"></div> </div>

    2 answers 2

    Javascript

     function ex(id) { document.getElementById(id).style.display = 'inline'; } document.getElementById('btn').addEventListener('click', function() { setTimeout(function() { ex('firstArrow'); }, 2000); setTimeout(function() { ex('secondArrow'); }, 4000); setTimeout(function() { ex('thirdArrow'); }, 6000); }); 
     .checkmark-circle { position: relative; display: none; vertical-align: top; } .checkmark-circle .background { width: 70px; height: 70px; border-radius: 50%; background: #2196f3; position: relative; } .checkmark-circle .checkmark { border-radius: 5px; } .checkmark-circle .checkmark.draw:after { -webkit-animation-delay: 100ms; -moz-animation-delay: 100ms; animation-delay: 100ms; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease; -moz-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-name: checkmark; -moz-animation-name: checkmark; animation-name: checkmark; -webkit-transform: scaleX(-1) rotate(135deg); -moz-transform: scaleX(-1) rotate(135deg); -ms-transform: scaleX(-1) rotate(135deg); -o-transform: scaleX(-1) rotate(135deg); transform: scaleX(-1) rotate(135deg); -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; animation-fill-mode: forwards; } .checkmark-circle .checkmark:after { opacity: 1; height: 25px; width: 27.5px; -webkit-transform-origin: left top; -moz-transform-origin: left top; -ms-transform-origin: left top; -o-transform-origin: left top; transform-origin: left top; border-right: 10px solid white; border-top: 10px solid white; border-radius: 2.5px !important; content: ''; left: 3px; top: 26px; position: absolute; } @-webkit-keyframes checkmark { 0% { height: 0; width: 0; opacity: 1; } 20% { height: 0; width: 37.5px; opacity: 1; } 40% { height: 75px; width: 37.5px; opacity: 1; } 100% { height: 75px; width: 37.5px; opacity: 1; } } @-moz-keyframes checkmark { 0% { height: 0; width: 0; opacity: 1; } 20% { height: 0; width: 37.5px; opacity: 1; } 40% { height: 75px; width: 37.5px; opacity: 1; } 100% { height: 75px; width: 37.5px; opacity: 1; } } @keyframes checkmark { 0% { height: 0; width: 0; opacity: 1; } 20% { height: 0; width: 37.5px; opacity: 1; } 40% { height: 25px; width: 25.5px; opacity: 1; } 100% { height: 40px; width: 30px; opacity: 1; } } .w3-button { width: 160px; } 
     <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p><button class="w3-button w3-deep-orange" id="btn">Deep Orange</button></p> <div class="checkmark-circle" id="firstArrow"> <div class="background"></div> <div class="checkmark draw"></div> </div> <br> <div class="checkmark-circle" id="secondArrow"> <div class="background"></div> <div class="checkmark draw"></div> </div> <br> <div class="checkmark-circle" id="thirdArrow"> <div class="background"></div> <div class="checkmark draw"></div> </div>

    jQuery

     function ex(id) { $('#' + id).show(); } $('#btn').on('click', function() { setTimeout(function() { ex('firstArrow'); }, 2000); setTimeout(function() { ex('secondArrow'); }, 4000); setTimeout(function() { ex('thirdArrow'); }, 6000); }); 
     .checkmark-circle { position: relative; display: none; vertical-align: top; } .checkmark-circle .background { width: 70px; height: 70px; border-radius: 50%; background: #2196f3; position: relative; } .checkmark-circle .checkmark { border-radius: 5px; } .checkmark-circle .checkmark.draw:after { -webkit-animation-delay: 100ms; -moz-animation-delay: 100ms; animation-delay: 100ms; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease; -moz-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-name: checkmark; -moz-animation-name: checkmark; animation-name: checkmark; -webkit-transform: scaleX(-1) rotate(135deg); -moz-transform: scaleX(-1) rotate(135deg); -ms-transform: scaleX(-1) rotate(135deg); -o-transform: scaleX(-1) rotate(135deg); transform: scaleX(-1) rotate(135deg); -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; animation-fill-mode: forwards; } .checkmark-circle .checkmark:after { opacity: 1; height: 25px; width: 27.5px; -webkit-transform-origin: left top; -moz-transform-origin: left top; -ms-transform-origin: left top; -o-transform-origin: left top; transform-origin: left top; border-right: 10px solid white; border-top: 10px solid white; border-radius: 2.5px !important; content: ''; left: 3px; top: 26px; position: absolute; } @-webkit-keyframes checkmark { 0% { height: 0; width: 0; opacity: 1; } 20% { height: 0; width: 37.5px; opacity: 1; } 40% { height: 75px; width: 37.5px; opacity: 1; } 100% { height: 75px; width: 37.5px; opacity: 1; } } @-moz-keyframes checkmark { 0% { height: 0; width: 0; opacity: 1; } 20% { height: 0; width: 37.5px; opacity: 1; } 40% { height: 75px; width: 37.5px; opacity: 1; } 100% { height: 75px; width: 37.5px; opacity: 1; } } @keyframes checkmark { 0% { height: 0; width: 0; opacity: 1; } 20% { height: 0; width: 37.5px; opacity: 1; } 40% { height: 25px; width: 25.5px; opacity: 1; } 100% { height: 40px; width: 30px; opacity: 1; } } .w3-button { width: 160px; } 
     <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p><button class="w3-button w3-deep-orange" id="btn">Deep Orange</button></p> <div class="checkmark-circle" id="firstArrow"> <div class="background"></div> <div class="checkmark draw"></div> </div> <br> <div class="checkmark-circle" id="secondArrow"> <div class="background"></div> <div class="checkmark draw"></div> </div> <br> <div class="checkmark-circle" id="thirdArrow"> <div class="background"></div> <div class="checkmark draw"></div> </div>

      If I understand correctly, then you just need to insert the call of all three functions into the click event handler. Based on the above code, jquery is used, so you can:

       //код сработает при полной загрузке страницы $(document).ready(function() { //получаем по id элемент и добавляем на событие клика обработчик $("#firstArrow").click(function() { //сюда вставить код, который нужно выполнить по клику }); });
      • Based on the above code, jquery is not used. Otherwise it would be much easier :) - Romchik
      • Although there is a link to the library ... - Romchik