Выполнение div с использованием задержки

300

29 июля 2017, 07:21

Добрый День! Как можно задать задержку для элемента div? В моем случае это 3 элемента, и суть проблемы заключается в том, что нужно срабатывание каждого элемента через 60 секунд. То есть 1 галка должна быть показана через 60 секунд после загрузки страницы, 2 галка после 120 секунд, 3 после 180 секунд. Как это можно реализовать с помощью JS? Спасибо. Прикрепил код: JSFIDDLE

Answer 1

решение, что называется - "в лоб":

function ex1() { 
   document.getElementById('firstArrow').style.display='inline'; 
} 
setTimeout(ex1,60000); 
function ex2() { 
   document.getElementById('secondArrow').style.display='inline'; 
} 
setTimeout(ex2,120000); 
function ex3() { 
   document.getElementById('thirdArrow').style.display='inline'; 
} 
setTimeout(ex3,180000);

    .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; 
  } 
}

<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>