spin child div with text on time

Question

I have created some divs with child in each div, each child was filled with vertical positioned number (one number per div), and I want to spin them vertically, each div with different speed, so for example I have at page load this line => 00000,00, after time, for example 20 seconds I want to see something like this one => 02110,15.

My problem is that I can't spin other numbers excluding the first one (but also first one don't spin well, because it froze one 1 but it should spin from 0 to 9 and after 9 return on 0 and from beginning).

What's going wrong?

$(document).ready(function() {

  var number_h = 200,
    offset = number_h - 5,
    spinner_h = 200;

  function spin() {
    $("#one_slot .one").children("div").css("transition", "all 5s ease");
    $("#one_slot .one").children("div").css("transform", "translateY(-" + number_h + "px)");
  }

  spin();

});

#content_wrapper {
  background: #693 repeat-x;
  background-size: 135px 100%;
  height: 200px;
  width: 1350px;
}

#one_slot,
#two_slot,
#tri_slot,
#four_slot,
#five_slot,
#six_slot,
#seven_slot,
#eich_slot,
#nine_slot,
#ten_slot {
  border: 1px solid #a50;
  width: 130px;
  height: 200px;
  overflow: hidden;
  float: left;
}

#ten_slot {
  float: right;
}

div>div {
  font-family: 'Open Sans', sans-serif;
  color: white;
  font-size: 140px;
  margin-left: 3px;
  text-align: center;
  display: block;
  height: 200px;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="content_wrapper">
  <div id="one_slot">
    <div class="one">
      <div>0</div>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div>
  </div>
  <div id="two_slot">
    <div class="one">
      <div>0</div>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div>
  </div>
  <div id="tri_slot">
    <div class="one">
      <div>0</div>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div>
  </div>
  <div id="four_slot">
    <div class="one">
      <div>0</div>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div>
  </div>
  <div id="five_slot">
    <div class="one">
      <div>0</div>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div>
  </div>
  <div id="six_slot">
    <div class="one">
      <div>0</div>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div>
  </div>
  <div id="seven_slot">
    <div class="one">
      <div>0</div>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div>
  </div>
  <div id="eich_slot">,</div>
  <div id="nine_slot">
    <div class="one">
      <div>0</div>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div>
  </div>
  <div id="ten_slot">
    <div class="one">
      <div>0</div>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div>
  </div>

</div>

View on JSFiddle

Answer 1

You are only calling spin() once. So it only spins once. You'll need to put it in a loop according to the timing you want with something like setInterval

$(document).ready(function() {

  var number_h = 200,
    offset = number_h - 5,
    spinner_h = 200;

  function spin() {
    $("#one_slot .one").children("div").css("transition", "all .5s ease");
    $("#one_slot .one").children("div").css("transform", "translateY(-" + number_h + "px)");
  }

  setInterval(function(){
    
    spin();
    number_h += 200;
    number_h %= 2200;
  }, 500)

});

#content_wrapper {
  background: #693 repeat-x;
  background-size: 135px 100%;
  height: 200px;
  width: 1350px;
}

#one_slot,
#two_slot,
#tri_slot,
#four_slot,
#five_slot,
#six_slot,
#seven_slot,
#eich_slot,
#nine_slot,
#ten_slot {
  border: 1px solid red;
  width: 130px;
  height: 200px;
  overflow: hidden;
  float: left;
}

#ten_slot {
  float: right;
}

div>div {
  font-family: 'Open Sans', sans-serif;
  color: white;
  font-size: 140px;
  margin-left: 3px;
  text-align: center;
  display: block;
  height: 200px;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="content_wrapper">
  <div id="one_slot">
    <div class="one">
      <div>0</div>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div>
  </div>
  <div id="two_slot">
    <div class="one">
      <div>0</div>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div>
  </div>
  <div id="tri_slot">
    <div class="one">
      <div>0</div>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div>
  </div>
  <div id="four_slot">
    <div class="one">
      <div>0</div>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div>
  </div>
  <div id="five_slot">
    <div class="one">
      <div>0</div>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div>
  </div>
  <div id="six_slot">
    <div class="one">
      <div>0</div>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div>
  </div>
  <div id="seven_slot">
    <div class="one">
      <div>0</div>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div>
  </div>
  <div id="eich_slot">,</div>
  <div id="nine_slot">
    <div class="one">
      <div>0</div>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div>
  </div>
  <div id="ten_slot">
    <div class="one">
      <div>0</div>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div>
  </div>

</div>

Not perfect by any means but it shows the idea