for loop demo

this is rad

by Alexus fox

HTML

<div id="containter">
  <div class="box" id="color-1"></div>
  <div class="box" id="color-2"></div>
  <div class="box" id="color-3"></div>
  <div class="box" id="color-4"></div>
  <div class="box" id="color-5"></div>
  <div class="box" id="color-4"></div>
  <div class="box" id="color-3"></div>
  <div class="box" id="color-6"></div>
  <div class="box" id="color-7"></div>
  <div class="box" id="color-2"></div>
  <div class="box" id="color-6"></div>
  <div class="box" id="color-7"></div>
  <div class="box" id="color-2"></div>
  <div class="box" id="color-5"></div>
  <div class="box" id="color-1"></div>
  <div class="box" id="color-6"></div>
  <div class="box" id="color-4"></div>
  <div class="box" id="color-5"></div>
  <div class="box" id="color-7"></div>
  <div class="box" id="color-4"></div>
  <div class="box" id="color-1"></div>
  <div class="box" id="color-2"></div>
  <div class="box" id="color-7"></div>
  <div class="box" id="color-3"></div>
  <div class="box" id="color-4"></div>
  <div class="box" id="color-5"></div>
  <div class="box" id="color-2"></div>
  <div class="box" id="color-6"></div>
  <div class="box" id="color-3"></div>
  <div class="box" id="color-5"></div>
  <div class="box" id="color-2"></div>
  <div class="box" id="color-1"></div>
  <div class="box" id="color-7"></div>
  <div class="box" id="color-6"></div>
  <div class="box" id="color-1"></div>
  <div class="box" id="color-5"></div>
  <div class="box" id="color-4"></div>
  <div class="box" id="color-7"></div>
  <div class="box" id="color-2"></div>
  <div class="box" id="color-6"></div>
  <div class="box" id="color-4"></div>
  <div class="box" id="color-3"></div>
  <div class="box" id="color-1"></div>
  <div class="box" id="color-5"></div>
  <div class="box" id="color-3"></div>
  <div class="box" id="color-1"></div>
  <div class="box" id="color-2"></div>
  <div class="box" id="color-3"></div>
  <div class="box" id="color-4"></div>
  <div class="box" id="color-5"></div>
  <div class="box"...

CSS

body {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#container {
  position: absolute;
  max-width: 100%;
  margin-top: -5%;
  padding: 0;
  white-space: nowrap;
    overflow: hidden
}

.box {
  width: 5px;
  height: 50px;
  background: black;
  margin: 1px 0px auto 0px;
  display: inline-block;
  top: 0;
  float: left;
}

#color-1 {
  background: black;
}

#color-2 {
  background: magenta;
}

#color-3 {
  background: blue;
}

#color-4 {
  background: red;
}

#color-5 {
  background: #00ff00;
}

#color-6 {
  background: yellow;
}

#color-7 {
  background: cyan;
}

JavaScript

/*for (var i = 1; i < 46; i++) {
  $('#container').append('<div id="color-' + i + '" class="box"></div>');
}*/

$('.box').mouseenter(function() {
  $(this).animate({
    height: 300,
  }, 700);
});

$('.box').mouseleave(function() {
  $(this).animate({
    height: '50px',
  }, 700);
});




//if you want things to repeat, you add them in the brackets of a for loop