SetInterval lặp lại chỉ một lần. Làm thế nào để sửa chữa nó?

Question

Tôi đang thử về ul sẽ di chuyển khoảng 40px lên đầu mỗi giây. Tôi đã cố gắng nhiều giải pháp trên stackoverflow, nhưng không có gì giúp đỡ.

Đó là mã của tôi

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

Bạn cần phải sử dụng -40 để -=40px hay -=40. -40 sẽ chỉ thiết lập margin-top như -40px, nếu bạn muốn giảm thì bạn cần phải sử dụng như -=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>

tính hoạt hình cũng có thể là tương đối. Nếu giá trị được cung cấp với một chuỗi ký tự đầu tiên là + = hoặc - = thì giá trị đích được tính bằng cách cộng hoặc trừ số đã cho từ giá trị hiện tại của thuộc tính.

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