Posted in jquery
2523
3:42 am, January 15, 2021

animate and zoom six elements on a timer [addClass, removeClass, setTimeout]

set of six elements that i wanted to highlight using a simple setTimeout and the addClass and removeClass 

this also involves some css changes to get this working

i would also like in the future to only start this animation when its visable on screen but for now it just starts when the document is ready. 

HTML

<div class='demo-boxes'>
  <div class='demo-box' id='db1'></div>
  <div class='demo-box' id='db2'></div>
  <div class='demo-box' id='db3'></div>
  <div class='demo-box' id='db4'></div>
  <div class='demo-box' id='db5'></div>
  <div class='demo-box' id='db6'></div>
</div>

CSS

.demo-box {
  border-radius:3px;
  margin:10px;
  padding:10px;
  min-height:200px;
  min-width:200px;
  background:#2e3c50;
  border:3px solid rgb(17 24 39);
  display:inline-block;
  transition: all 0.3s;
}
.demo-box-active {
  transition: all 0.1s;
  transform: scale(1.2);
  box-shadow:0px 2px 20px rgba(0,0,0,0.5);
}

Javascript

$(document).ready(function(){
      setTimeout(function() { $('#db1').addClass('demo-box-active'); }, 1000);
      setTimeout(function() { $('#db1').removeClass('demo-box-active'); }, 3000);
      setTimeout(function() { $('#db2').addClass('demo-box-active'); }, 3000);
      setTimeout(function() { $('#db2').removeClass('demo-box-active'); }, 5000);
      setTimeout(function() { $('#db3').addClass('demo-box-active'); }, 5000);
      setTimeout(function() { $('#db3').removeClass('demo-box-active'); }, 7000);
      setTimeout(function() { $('#db4').addClass('demo-box-active'); }, 7000);
      setTimeout(function() { $('#db4').removeClass('demo-box-active'); }, 9000);
      setTimeout(function() { $('#db5').addClass('demo-box-active'); }, 9000);
      setTimeout(function() { $('#db5').removeClass('demo-box-active'); }, 11000);
      setTimeout(function() { $('#db6').addClass('demo-box-active'); }, 11000);
      setTimeout(function() { $('#db6').removeClass('demo-box-active'); }, 13000);
    });

View Statistics
This Week
49
This Month
97
This Year
97

No Items Found.

Add Comment
Type in a Nick Name here
 
Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

Join me on Substack if you want me to send you a collection of the things i have done or found or read for the week. Or follow me on twitter if you prefer, i dont post much but i probably should!

❤👩‍💻🕹

Random Quote
The mind must be given relaxation; it will arise better and keener after resting. As rich fields must not be forced-for their productiveness, the have no rest, will quickly exhaust them constantlabor will break the vigor of the mind, but if it is released and relaxed a little while, it will recover its powers
Seneca