CODEWITHSUNDEEP
javascriptcss
Goldensquare
Goldensquare

Reputation: 331

setting time delay between two animation with javascript

I am looking for having a time delay between the seconds box expanding and then after few seconds , the box shadowing. I have tried using setInterval but to no good. Is there any other clean way to do it?

setInterval(clock,1000);
function clock(){
var d = new Date();
document.getElementById("hour").innerHTML = "Hours: " + d.getHours();
document.getElementById("minutes").innerHTML = "Minutes: " + d.getMinutes();
document.getElementById("seconds").innerHTML = "Seconds: " + d.getSeconds();
}
function myfunction(){
	var object = document.getElementById("seconds");
    object.style.padding = "100px";
    object.style.boxShadow = "0px 0px 15px black";
    
}
div{
    position:absolute;
    left:100px;
    top:100px;
	text-align:center;
    border:5px solid grey;
    padding:15px;
    margin:0;
    transition:0.3s;
	}
    div:hover{
    box-shadow:0px 5px 5px black;
    }
	p:nth-child(2){
    width:100px;
    border:1px solid black;
    background-color:lightyellow;
    }
    p:nth-child(3){
    width:100px;
    border:1px solid black;
    background-color:lightblue;
    }
    p:nth-child(4){
    width:100px;
    border:1px solid black;
    background-color:lightgreen;
    transition:.5s;
    }
<button onclick="myfunction()">Change Seconds background settings</button>
<div>
<p>Casio</p>
<p id="hour"></p>
<p id="minutes"></p>
<p id="seconds"></p>
</div>

Upvotes: 0

Views: 32

Answers (1)

Asons
Asons

Reputation: 87191

You accomplish that by adding multiple properties for the transition property and set a delay on, in your case, the box-shadow property, here with 1s

transition: padding .5s, box-shadow .5s 1s;

Stack snippet

setInterval(clock, 1000);

function clock() {
  var d = new Date();
  document.getElementById("hour").innerHTML = "Hours: " + d.getHours();
  document.getElementById("minutes").innerHTML = "Minutes: " + d.getMinutes();
  document.getElementById("seconds").innerHTML = "Seconds: " + d.getSeconds();
}

function myfunction() {
  var object = document.getElementById("seconds");
  object.style.padding = "100px";
  object.style.boxShadow = "0px 0px 15px black";

}
div {
  position: absolute;
  left: 100px;
  top: 100px;
  text-align: center;
  border: 5px solid grey;
  padding: 15px;
  margin: 0;
  transition: 0.3s;
}

div:hover {
  box-shadow: 0px 5px 5px black;
}

p:nth-child(2) {
  width: 100px;
  border: 1px solid black;
  background-color: lightyellow;
}

p:nth-child(3) {
  width: 100px;
  border: 1px solid black;
  background-color: lightblue;
}

p:nth-child(4) {
  width: 100px;
  border: 1px solid black;
  background-color: lightgreen;
  transition: padding .5s, box-shadow .5s 1s;
}
<button onclick="myfunction()">Change Seconds background settings</button>
<div>
  <p>Casio</p>
  <p id="hour"></p>
  <p id="minutes"></p>
  <p id="seconds"></p>
</div>

Based on a comment, here is how one could use setTimeout for the delay

setInterval(clock, 1000);

function clock() {
  var d = new Date();
  document.getElementById("hour").innerHTML = "Hours: " + d.getHours();
  document.getElementById("minutes").innerHTML = "Minutes: " + d.getMinutes();
  document.getElementById("seconds").innerHTML = "Seconds: " + d.getSeconds();
}

function myfunction() {
  var object = document.getElementById("seconds");
  object.style.padding = "100px";
  setTimeout(function() {
    object.style.boxShadow = "0px 0px 15px black";
  }, 1000);
}
div {
  position: absolute;
  left: 100px;
  top: 100px;
  text-align: center;
  border: 5px solid grey;
  padding: 15px;
  margin: 0;
  transition: 0.3s;
}

div:hover {
  box-shadow: 0px 5px 5px black;
}

p:nth-child(2) {
  width: 100px;
  border: 1px solid black;
  background-color: lightyellow;
}

p:nth-child(3) {
  width: 100px;
  border: 1px solid black;
  background-color: lightblue;
}

p:nth-child(4) {
  width: 100px;
  border: 1px solid black;
  background-color: lightgreen;
  transition: .5s;
}
<button onclick="myfunction()">Change Seconds background settings</button>
<div>
  <p>Casio</p>
  <p id="hour"></p>
  <p id="minutes"></p>
  <p id="seconds"></p>
</div>

Upvotes: 1

Related Questions