Possible ways of animating appendTo and prependTo in horizontal list

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

Here's a solution, it works well enough, but there's definite improvements to be made. I made the ul { position: relative }, after prepending/appending the item immediately offset it's position using left or right css attributes, and then animated these values using jquery back to 0.

Moreover, its important that the previous animation queue is cleared with jquery.stop(), and that the left/right value is reset, depending on the attribute being animated.

I did some tweaking on the numbers to make it look right - if you modify its current size or styling, you will have to tweak the exact css values again, but the principle will be exactly the same. Hope this helps.

My fiddle: http://jsfiddle.net/Lmdk64a5/2/