这是我的
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>
解决方法
您可以轻松地替换您的线条：
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中证明了这一点
