How to make a similar animation

enter image description here enter image description here enter image description here

I am writing the following

HTML

<div class="pos"> <div class="q-1 active"></div> <div class="q-2 active"></div> <div class="q-3 active"></div> <div class="q-4 active"></div> </div>

CSS

 .pos { margin-top: 150px; } .q-1, .q-2, .q-3, .q-4, .q-5, .q-6, .q-7 { position: relative; display: inline-block; width: 40px; height: 1px; background: red; } .q-1.active:after{ position: absolute; content:url('flower-1.png'); height:145px; top:-145; } .q-2.active:after{ position: absolute; content:url('flower-2.png'); height: 91px; top: -92px; } .q-3.active:after{ position: absolute; content:url('flower-3.png'); height: 120px; top: -120px; } .q-4.active:after{ position: absolute; content:url('flower-4.png'); height: 95px; top: -95px; }

Js

 el=$(".pos div") cnt=0 $(".pos div").each(function(i,e){ setInterval(function(){ el.eq(cnt++).addClass("active") },2000) el.removeClass("active") })
  • writing the following ........ and ......? - Alexey Shimansky
  • what and?, failed - G_test_00
  • And what exactly did not work out - it would be necessary to guess, yes? Were there any errors or just the code gets up from the chair and hits the textbook on the head? And where is the html markup? Where are the commas in the code? Strike? - Alexey Shimansky
  • one
    There is such a simple lib for sprite animations: blaiprat.imtqy.com/jquery.animateSprite - Beast Winterwolf
  • html added, no, this is not suitable - G_test_00

1 answer 1

 var func = window.setInterval(start, 2000), els = $("div"), cnt = 0; function start() { cnt = (cnt === els.length) ? 0 : cnt; els.removeClass("active"); els.eq(cnt++).addClass("active") } 
 .q-1, .q-2, .q-3, .q-4, .q-5, .q-6, .q-7 { background: #ccc; position: relative; display: inline-block; height: 145px; width: 40px; border-bottom: solid 2px red; font: bold 1em sans-serif; } .q-1.active:after, .q-2.active:after, .q-3.active:after, .q-4.active:after, .q-5.active:after, .q-6.active:after, .q-7.active:after { position: absolute; left: 15px; top: 10px; } .q-1.active:after{ content:"1"; } .q-2.active:after{ content:"2"; } .q-3.active:after{ content:"3"; } .q-4.active:after{ content:"4"; } .q-5.active:after{ content:"5"; } .q-6.active:after{ content:"6"; } .q-7.active:after{ content:"7"; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="q-1"></div> <div class="q-2"></div> <div class="q-3"></div> <div class="q-4"></div> <div class="q-5"></div> <div class="q-6"></div> <div class="q-7"></div>

  • You forgot the condition to add a zeroing counter - Alexey Shimansky
  • @ Alexey Shimansky corrected :) - Zoltan Toth