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

Question

I'm trying about ul will moving about 40px to top every second. I was trying many solutions on stackoverflow, but nothing helped.

That's my code

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>

Answer 1

You need to use -40 to -=40px or -=40. -40 will just set the margin-top as -40px, if you want to decrease then you need to use like -=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>

Animated properties can also be relative. If a value is supplied with a leading += or -= sequence of characters, then the target value is computed by adding or subtracting the given number from the current value of the property.

Taken from http://api.jquery.com/animate/#animation-properties