SetInterval只重複一次。如何解決它？

Question

我正在嘗試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>

Answer 1

您需要使用-40來-=40px或-=40。 -40將只設置邊距爲-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