Slot machine effect for images

by Akram kamal

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<div class="viewbox">
    <div class="wrapper 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>
<div class="viewbox">
    <div class="wrapper 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" class="start" />|
<input type="button" value="move To" class="moveTo" />
<input type="text" class="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: -150px -400px;
}
.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

$.fn.randomize = function (childElem) {
    function shuffle(o) {
        for (var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
        return o;
    };
    return this.each(function () {
        var $this = $(this);
        var elems = $this.children(childElem);

        shuffle(elems);

        $this.detach(childElem);

        for (var i = 0; i < elems.length; i++) {
            $this.append(elems[i]);
        }
    });
}
$.fn.slots = function () {
    "use strict"
    return this.each(function () {
        var self = $(this)
        var list = self.children('ul:first') //.randomize("li");
        var firstItem = list.find('li:first');
        firstItem.clone().appendTo(list);
        console.log("slots", self)

        $('.start').click(function () {
            console.log("start", self)
            spin(1)
        });
        $('.moveTo').click(function () {
            moveTo($('.pos').val());
        });


        function moveTo(val) {
            console.log("moveTo", val)
            val = -val % 1200;
            if (val > 0) val -= 1200;
            self.css({
                top: val
            });
        }

        function spin(count) {
            self.stop().animate({
                top: -1200
            }, 2000, 'easeOutQuad', function () {
                if (count == 0) {
                    var slot = Math.floor(Math.random() * list.children().length),
                        top = -slot * 200,
                        time = 2000 * slot / 6;
                    console.log(count, slot, top, time)
                    $(this).css({
                        top: 0
                    }).animate({
                        top: top
                    }, time, 'easeOutQuad', function () {
                        console.log("cleanup", slot)
                        $(this).css({
                            top: 0
                        })
                        $(this).find("li:last").remove()
 ...