如何动画列表从下到上答案

【问题标题】：How to animate List from Down to Up如何动画列表从下到上
【发布时间】：2014-11-11 06:28:14
【问题描述】：

我正在创建一个类似于 Up to Down 的小动画，一旦它滚动到最后，它就会从 Down 到 Up，它会一次又一次地重复。

<style>
#scrollList{height:150px; width:200px; overflow:auto; margin:40px auto;}
#scrollList li{height:45px;}
</style>
<script type="text/javascript">
//document.getElementById("scrollList").setAttribute("onClick","scrollList()");
function scrollList() {
//var scrollHeight = document.getElementById("scrollList").scrollTop;
//console.log(scrollHeight);

var ActualscrollHeight = document.getElementById("scrollList").clientHeight;
console.log(ActualscrollHeight);

setInterval(function(){
var scrollHeight = document.getElementById("scrollList").scrollTop;
if(scrollHeight <= ActualscrollHeight){
scrollHeight = scrollHeight + 1;
//console.log(scrollHeight);
document.getElementById("scrollList").scrollTop=scrollHeight;
}


}, 3);
}
</script>

<body onload="scrollList()">
<ul id="scrollList">
<li>Scroll Text</li>
<li>Scroll Text</li>
<li>Scroll Text</li>
<li>Scroll Text</li>
<li>Scroll Text</li>
<li>Scroll Text</li>
<li>Scroll Text</li>
</ul>

【问题讨论】：

标签： javascript jquery animation scroll vertical-scrolling

【解决方案1】：

试试这个：

function scrollList() {
    var ActualscrollHeight = document.getElementById("scrollList").clientHeight;
    var down = true;
    setInterval(function () {
        var scrollHeight = document.getElementById("scrollList").scrollTop;
        if (scrollHeight == 0) {
            down = true;
        } else if (scrollHeight >= ActualscrollHeight) {
            down = false;
        }
        scrollHeight = (!down) ? scrollHeight - 1 : scrollHeight + 1;
        document.getElementById("scrollList").scrollTop = scrollHeight;
    }, 3);
}

Fiddle

【讨论】：

【解决方案2】：

您可以使用 jQuery 来做到这一点，即：

$("#scrollList").load(function(){

    while(1){
        $(this).slideUp(1000);
        $(this).slideDown(1000);
    }

});

希望这会有所帮助。

【讨论】：

嗨，这里我不能使用 jQuery...谢谢
@AmbujKhanna 只要您在帖子中保留 jquery 标签，他的答案就是 VALID ！ :)