SetInterval只重复一次.如何修复它

SetInterval is repeating only one time. How to fix it?

本文关键字：一次 何修复 SetInterval      更新时间：2023-09-26

我正在尝试ul将每秒移动约40px到顶部。我在stackoverflow上尝试了很多解决方案，但是没有任何帮助。

这是我的代码

setInterval(function() {
  $("#ul_news").animate({
    marginTop: -40
  }, 300);
}, 1000);
#ul_news {
  /*position: absolute;
  top: 0;
  left: 100px;
  z-index: 20;*/
}
#ul_news li {
  z-index: 20;
  color: black;
  list-style: none;
  padding-bottom: 50px;
}
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <ul id="ul_news">
    <li class="active">ahoj2</li>
    <li class="non_active1">ahoj3</li>
    <li class="non_active2">ahoj4</li>
    <li class="non_active3">ahoj5</li>
  </ul>

需要使用-40 ~ -=40px或-=40。-40只会将margin-top设置为-40px，如果你想减少，你需要使用-=40 

setInterval(function() {
  $("#ul_news").animate({
    marginTop: '-=40px'
  }, 300);
}, 1000);
#ul_news {
  /*position: absolute;
  top: 0;
  left: 100px;
  z-index: 20;*/
}
#ul_news li {
  z-index: 20;
  color: black;
  list-style: none;
  padding-bottom: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <ul id="ul_news">
    <li class="active">ahoj2</li>
    <li class="non_active1">ahoj3</li>
    <li class="non_active2">ahoj4</li>
    <li class="non_active3">ahoj5</li>
  </ul>

动画属性也可以是相对的。如果为一个值提供了前导+=或-=字符序列，则通过从属性的当前值中添加或减去给定的数字来计算目标值。

摘自http://api.jquery.com/animate/#animation-properties

相关文章：