如何为列表设置动画？

Question

这是我的JSFiddle

正如您可以从小提琴中看到的那样,有一个列表在箭头的帮助下滚动.所以我想要的是在列表可见和隐藏时动画转换.

我不知道动画.我已经看过很多例子并尝试用我的例子来调整它们但是它不起作用......如何让列表动画？

$(document).ready(function(){
    var code='';
    for(var i=1;i<=20;i++)
    {
        code+="<li>list Item "+i+"</li>";
    }
    $('#list-items').html(code);        
        
});


var list_items = [];
var index = 0;
var list_length = 0;

function getAllListItems() {
    var temp = document.getElementsByTagName('li');

    for (i = 0; i < temp.length; i++) {
        list_items.push(temp[i]);
    }

    list_length = temp.length;
}

getAllListItems();

function move(dir) {


    if (dir == left) {
        list_items[index].style.display = 'block';
        index--;

        if (index < 0) {
            index = 0;
        }
    } else if (dir == right) {

        list_items[index].style.display = 'none';

        if (index >= ((list_length) - 1)) {
            index = (list_length) - 1;
        } else {
            index++;
        }
    } else {}
}

* {
    box-sizing: border-box;
}
ul {
    float:left;
    height:50px;
    width: 600px;
    overflow: hidden;
}
ul li {
    text-align: center;
    border: 2px solid black;
    width: 100px;
    height: 50px;
    float: left;
    list-style-type: none;
    background-color: aquamarine;
}
ul li:first-child {
    display: block;
}
#left, #right {
    float:left;
    height:50px;
    background-color:aqua;
    font-size:2em;
    padding-left: 20px;
    padding-right:20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body onload='getAllListItems()'>
    <div id='t'></div>
    <button id='left' onClick="move(left)">
        <</button>
           
                <ul id='list-items'>
                    
                </ul>
         
            <button id='right' onClick='move(right)'>></button>
</body>

Answer 1

您可以轻松地替换您的线条:

list_items[index].style.display = 'block';
list_items[index].style.display = 'none';

使用jQuery show()和hide()函数:

$(list_items[index]).show("slow");
$(list_items[index]).hide("slow");

正如我的小提琴的更新版本所示

对于不同的转换,您可以使用该animate()函数,它可以告诉它要影响的css属性.除了数值之外,jQuery还支持特殊值'show','hide'和'toggle'(顺便提一下,它将使用该属性显示,隐藏或切换元素的显示/隐藏状态).因此,例如,如果您只想水平收缩它们并保持垂直,您可以更改.show()和.hide()调用:

$(list_items[index]).animate({width:'show'}, 600);
$(list_items[index]).animate({width:'hide'}, 600);

我已经在另一个更新的小提琴中证明了这一点