Slot machine effect for images

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<div id="viewbox">
    <div class="wrapper" id="slotmachine">
        <ul>
            <li class="noseEliott"></li>
            <li style="background:#ff0">2</li>
            <li style="background:#0f0">3</li>
            <li style="background:#0ff">4</li>
            <li style="background:#00f">5</li>
            <li style="background:#f0f">6</li>
        </ul>
    </div>
</div>
<input type="button" value="start" id="start" />|
<input type="button" value="move To" id="moveTo" />
<input type="text" id="pos" value="0" size="5" />

CSS

.noseEliott {
    background-image:url('http://www.hh2015.dev-shm.net/images/ppl/noseEliott.jpg');
    background-size:300%;
    background-repeat:no-repeat;
    transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
    -ms-transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    -webkit-transition: all .3s ease-in;
background-position: -100px -500px;

}
.noseEliott:hover {
    background-size:100%;
background-position: 0px 0px;
}
#viewbox {
    overflow: hidden;
    width: 300px;
    height: 200px;
    border: solid 1px #000;
    position: relative;
}
#viewbox .wrapper {
    position: relative;
}
#viewbox ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#viewbox li {
    display: block;
    width: 300px;
    height: 200px;
    text-align: center;
    font-size: 170px;
}

JavaScript

$(document).ready(function () {

    // Clone the first element and append it to the end of the list
    var list = $('#slotmachine>ul:first');
    var firstItem = list.find('li:first');
    firstItem.clone().appendTo(list);

    function moveTo(val) {
        val = -val % 1200;
        if (val > 0) val -= 1200;
        $('#slotmachine').css({
            top: val
        });
    }

    function spin(count) {
        $('#slotmachine').stop().animate({
            top: 1200
        }, 2000, 'linear', function () {
            if (count == 0) {
                var slot = Math.floor(Math.random() * 6),
                    top = -slot * 200,
                    time = 2000 * slot / 6;
                console.log(count, slot, top, time)
                $(this).css({
                    top: 0
                }).animate({
                    top: top
                }, time, 'easeOutQuad')
            } else {
                $(this).css({
                    top: 0
                })
                spin(count - 1)
            };
        });
    }
    $('#start').click(function () {
        $('#slotmachine').css({
            top: 0
        })
        spin(1)
    });

    $('#moveTo').click(function () {
        moveTo($('#pos').val());
    });
});