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

正如我Fiddle

的更新版本所示

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

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

我已经在另一个更新的Fiddle

中证明了这一点

如何为列表设置动画？

1 个答案: