这是我的 JSFiddle
正如您从 fiddle 中看到的那样，有一个列表在箭头的帮助下滚动。所以我想要的是在列表可见和隐藏时为该过渡设置动画。
我不知道动画。我看过很多例子，并尝试用我的例子来调整它们，但它不起作用......我如何让列表动画化？
$(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>最佳答案
你可以轻松地替换你的行:
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 中演示了这一点
关于javascript - 如何动画列表？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30182684/