CODEWITHSUNDEEP
javascripthtmlcss
pratik
pratik

Reputation: 100

multiple div hide and show during the sequence

In this code, I want the div to show and hide during the sequence. In this code first div appears when the sequence starts, after sequence reaches image no 5, the first div is hidden and the second div appears. Then after thesequence reaches no 7, div no 2 is hide and div no 3 appears and finally when the sequence reaches image no 15, div no 3 is hidden and div no 4 appears. Is this possible?

onload = function startAnimation() { 
    var frames = document.getElementById("animation").children;
    var frameCount = frames.length;
    var i = 0, j = 0;
    var interval = setInterval(function () {
        frames[i % frameCount].style.display = "none";
        frames[++i % frameCount].style.display = "block";
        j++;
        if(j === 14) {
            clearInterval(interval);
            
        }
    },100); 
}
#animation img {
    display: none;
}
#animation img:first-child {
    display: block;
}
.d-none{
display:none
}
.d-block{
display:block;
}
<div id="animation"> 
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging01.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging02.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging03.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging04.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging05.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging06.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging07.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging08.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging09.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging10.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging11.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging12.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging13.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging14.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging15.png" />
</div>
<div class="d-block">
this div is aappear1
</div>
<div class="d-none">
this div is aappear2
</div>
<div class="d-none">
this div is aappear3
</div>
<div class="d-none">
this div is aappear4
</div>

Upvotes: 0

Views: 543

Answers (3)

Hamza Abdaoui
Hamza Abdaoui

Reputation: 2209

This can be done, considering j is the counter of the loaded images, you just need to test if this number is < 5 then display #div1 and hide the rest, etc ...

Please consider that this is not the optimal solution, there is so many ways to enhance it. Happy coding :D

onload = function startAnimation() { 
    var frames = document.getElementById("animation").children;
    var frameCount = frames.length;
    var i = 0, j = 1;
    var interval = setInterval(function () {
        if(j < 5 ){
          document.getElementById("div1").style.display = "block";
          document.getElementById("div2").style.display = "none";
          document.getElementById("div3").style.display = "none";
          document.getElementById("div4").style.display = "none";
        }else
          if(j < 7 && j >= 5){
             document.getElementById("div2").style.display = "block";
             document.getElementById("div1").style.display = "none";
             document.getElementById("div3").style.display = "none";
             document.getElementById("div4").style.display = "none";
          }else
             if(j >= 7 && j < 15){
               document.getElementById("div3").style.display = "block";
               document.getElementById("div1").style.display = "none";
               document.getElementById("div2").style.display = "none";
               document.getElementById("div4").style.display = "none";
             }else
               if(j == 15){
                 document.getElementById("div4").style.display = "block";
                 document.getElementById("div2").style.display = "none";
                 document.getElementById("div3").style.display = "none";
                 document.getElementById("div1").style.display = "none";
                }

        frames[i % frameCount].style.display = "none";
        frames[++i % frameCount].style.display = "block";
        j++;
        if(j > 15) {
            clearInterval(interval);
            j = 1;
        }
    },100); 
}
#animation img {
    display: none;
}
#animation img:first-child {
    display: block;
}
.d-none{
display:none
}
.d-block{
display:block;
}
<div id="animation"> 
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging01.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging02.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging03.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging04.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging05.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging06.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging07.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging08.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging09.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging10.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging11.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging12.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging13.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging14.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging15.png" />
</div>
<div class="d-block" id="div1">
this div is aappear1
</div>
<div class="d-none" id="div2">
this div is aappear2
</div>
<div class="d-none" id="div3">
this div is aappear3
</div>
<div class="d-none" id="div4">
this div is aappear4
</div>

Upvotes: 0

Neji Soltani
Neji Soltani

Reputation: 1511

Here's my solution , I did the show/hide divs based on the index of the current picture

onload = function startAnimation() {
  var frames = document.getElementById("animation").children;
  var frameCount = frames.length;
  var i = 0,
    j = 0;
  var interval = setInterval(function() {
    frames[i % frameCount].style.display = "none";
    frames[++i % frameCount].style.display = "block";
    j++;
    if (i == 4) {
      showdiv(2)
    }
    if (i == 6) {
      showdiv(3)
    }
    if (i == 14) {
      showdiv(4)
    }
    if (j === 14) {
      clearInterval(interval);

    }
  }, 100);
}

function showdiv(index) {
  var previous = index - 1;
  var current = index;
  document.getElementById("div" + previous.toString()).className = "d-none";
  document.getElementById("div" + current.toString()).className = "d-block";
}
#animation img {
  display: none;
}

#animation img:first-child {
  display: block;
}

.d-none {
  display: none
}

.d-block {
  display: block;
}
<div id="animation">
  <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging01.png" />
  <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging02.png" />
  <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging03.png" />
  <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging04.png" />
  <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging05.png" />
  <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging06.png" />
  <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging07.png" />
  <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging08.png" />
  <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging09.png" />
  <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging10.png" />
  <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging11.png" />
  <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging12.png" />
  <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging13.png" />
  <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging14.png" />
  <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging15.png" />
</div>
<div id="div1" class="d-block">
  this div is aappear1
</div>
<div id="div2" class="d-none">
  this div is aappear2
</div>
<div id="div3" class="d-none">
  this div is aappear3
</div>
<div id="div4" class="d-none">
  this div is aappear4
</div>

Upvotes: 2

Mos&#232; Raguzzini
Mos&#232; Raguzzini

Reputation: 15841

You don't even need JS to do this, the easiest way is through CSS, take a look:

#list {
	margin: 2em auto;
	padding: 0;
	max-width: 600px;
	list-style: none;
	height: 15em;
}

#list li {
	float: left;
	width: 100px;
	height: 100px;
	margin: 0 5px;
	background: #ccc;
	text-align: center;
	line-height: 100px;
	opacity: 0;
	animation: fadeIn 1s ease-in both;
}

#list li:nth-child(2) {
	animation-delay: 1s;
}
#list li:nth-child(3) {
	animation-delay: 2s;
}
#list li:nth-child(4) {
	animation-delay: 3s;
}
#list li:nth-child(5) {
	animation-delay: 4s;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translate3d(0, -20%, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}
<ul id="list">
	<li>A</li>
	<li>B</li>
	<li>C</li>
	<li>D</li>
	<li>E</li>
</ul>

Upvotes: 0

Related Questions