如何为列表添加动画效果？

Question

如何为列表添加动画效果？

6

这是我的JSFiddle。

从这个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>

- Bhavik Joshi

2

不错的问题，我也想了解如何将动画添加到列表中。而且赞同你关于旋转菜单的优美逻辑。我也是第一次见到这种效果。 - Sandhya Gor

@sandhyaGor 谢谢。 - Bhavik Joshi

有很多适用的库。其中一个是Slick，它可以通过内存实现；请尝试访问http://kenwheeler.github.io/slick/。 - Carlos2W

嗨，看一下这个答案：https://dev59.com/OlXTa4cB1Zd3GeqPyBCA#5252836 - vasilenicusor

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Steve K · Accepted Answer

你可以轻松地替换你的行：

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");

如我更新的Fiddle版本所示

对于不同的过渡效果，你可以使用animate()函数，它让你告诉它要影响哪些css属性。除了数值之外，jQuery还支持特殊值'show'、'hide'和'toggle'（顺带一提，它们将显示、隐藏或切换元素的显示/隐藏状态使用该属性）。因此，例如，如果你只想在水平方向上缩小它们，而保留垂直方向，则可以将.show()和.hide()调用更改为：

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

我已经在另一个更新的Fiddle中演示了这一点。