在水平列表中设置appendTo和prependTo动画的可能方法

Possible ways of animating appendTo and prependTo in horizontal list

本文关键字：动画 方法 prependTo 列表 水平 设置 appendTo      更新时间：2023-09-26

有一个简单的图库插件，我想知道在这个更改幻灯片的实现中（使用ul数组中的追加，而不是边距）有没有任何方法可以动画滚动效果（从左到右，反之亦然）？

下面是片段，想象一下黑色边框就是您的视口。

function moveLeft() {
    var last = $('ul li:last-child');
    last.prependTo('ul');
};
function moveRight() {
    var first = $('ul li:first-child');
    first.appendTo('ul');
};
$('a.next').click(function (e) {
    e.preventDefault();
    moveRight();
});
$('a.prev').click(function (e) {
    e.preventDefault();
    moveLeft();
});
ul{
    white-space:nowrap;
}
ul li{
    display: inline-block;
    margin: 15px;
}
.viewport{
    position:absolute;
    top: 15px;
    left:100px;
    width:100px;
    height:50px;
    border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
<div class="viewport">
</div>
    
<a href="" class="prev">Previous</a>
<a href="" class="next">Next</a>

这里有一个解决方案，它运行得很好，但还有一些明确的改进。我制作了ul { position: relative }，在准备/附加项目后，立即使用left或right css属性偏移其位置，然后使用jquery将这些值动画化为0。

此外，重要的是使用jquery.stop()清除上一个动画队列，并根据要设置动画的属性重置left/right值。

我对数字进行了一些调整，使其看起来正确——如果你修改其当前的大小或样式，你将不得不再次调整确切的css值，但原理将完全相同。希望这能有所帮助。

我的小提琴：http://jsfiddle.net/Lmdk64a5/2/

相关文章：