Question

There is simple gallery plugin, and i'm wondering is there any ways to animate scrolling effect ( from left to right and vice versa) in this implementation of changing slides(using append in ul array, not margins)?

Below is the snippet, imagine that black border is your viewport.

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>

Answer 1

这是一个解决方案，它运作良好，但有明确的改进。我使用ul { position: relative }或left css属性在预先添加/附加项目后立即偏移它的位置right，然后使用jquery将这些值设置为0。< / p>

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

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

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

Possible ways of animating appendTo and prependTo in horizontal list

1 个答案: