使 div 顶部位置每 x 秒更改一次答案

【问题标题】：Make div top position change every x seconds使 div 顶部位置每 x 秒更改一次
【发布时间】：2017-07-14 16:45:55
【问题描述】：

我有一个绝对定位的 div 和孩子。我希望这个 div 的顶部位置每 x 秒更改一次。我曾尝试使用 jquery setInterval，但它只更改一次。下面是我的代码。

.com_prices {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #dd0d0d;
  position: relative;
} 
.com_tabs {
  position: absolute;
  height: auto;
  width: 100%;
}
.com_price_tab {
  width: 90%;
  margin: 10px auto;
  height: 100px;
  background: #fff; 
}

html

<div class="com_prices">
    <div class="com_tabs">
      <div class="com_price_tab"></div>
      <div style="background: #28bc88" class="com_price_tab"></div>
      <div style="background: #fff000" class="com_price_tab"></div>
      <div style="background: #333" class="com_price_tab"></div>
      <div style="background: #28bc88" class="com_price_tab"></div>
      <div style="background: #999" class="com_price_tab"></div>
      <div class="com_price_tab"></div>
      <div class="com_price_tab"></div>
    </div>
  </div>

脚本

 setInterval(function() {
    $('.com_tabs').animate({top: "-100px"}, 350);
 }, 2000);

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

您将 top 设置为等于“-100px”。你需要将当前位置减去100。

 var $comtabs = $('.com_tabs');
 setInterval(function() {
    var top = parseInt($comtabs.css("top"));
    $comtabs.animate({top: top - 100 + "px"}, 350);
 }, 2000);

工作示例：

var $comtabs = $('.com_tabs');
setInterval(function() {
  var top = parseInt($comtabs.css("top"));
  $comtabs.animate({
    top: top - 100 + "px"
  }, 350);
}, 2000);

html,
body {
  background: #000;
  height: 100%;
  margin: 0;
  padding: 0;
}

.com_prices {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #dd0d0d;
  position: relative;
}

.com_tabs {
  position: absolute;
  height: auto;
  width: 100%;
}

.com_price_tab {
  width: 90%;
  margin: 10px auto;
  height: 100px;
  background: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="com_prices">
  <div class="com_tabs">
    <div class="com_price_tab"></div>
    <div style="background: #28bc88" class="com_price_tab"></div>
    <div style="background: #fff000" class="com_price_tab"></div>
    <div style="background: #333" class="com_price_tab"></div>
    <div style="background: #28bc88" class="com_price_tab"></div>
    <div style="background: #999" class="com_price_tab"></div>
    <div class="com_price_tab"></div>
    <div class="com_price_tab"></div>
  </div>
</div>

【讨论】：

这里有更新版本 jsfiddle.net/z8gf334f/1 。一旦它到达底部，它将回滚到顶部。
@Shiladitya 那将是一个单独的问题。如果您想接受此答案，然后在新帖子中发布有关如何回滚的问题，您可以在此处将其链接到 cmets，我也会尝试回答。

【解决方案2】：

问题是您将top 位置设置为-100px。在第一次之后，该函数试图将顶部位置设置为它已经在 (-100px) 处的相同值，因此不进行任何更改。您可以获得当前的最高值并从该值中减去 100px。类似的东西：

setInterval(function() {
    var $el = $('.com_tabs');
    var top = $el.css('top');
        var topNumber = top.substr(0, top.length -2) - 100;
        console.log(topNumber);
        $el.animate({top: topNumber + 'px'}, 350);
}, 2000);

【讨论】：