jquery - 按时旋转带有文本的子div

Question

我在每个 div 中创建了一些带有子项的 div，每个子项都填充了垂直定位的数字(每个 div 一个数字)，我想垂直旋转它们，每个 div 具有不同的速度，例如我在页面加载此行 => 00000,00，经过一段时间，例如 20 秒后，我想看到类似这样的内容 => 02110,15。

我的问题是除了第一个数字我无法旋转其他数字(而且第一个旋转得不好，因为它卡住了一个 1 但它应该从 0 旋转到 9 并且9 后从 0 开始返回)。

出了什么问题？

$(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

你只调用了一次spin()。所以它只旋转一次。你需要根据你想要的时间将它放在一个循环中，比如 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>

无论如何都不完美，但它展示了这个想法